.login-btn, .register-btn { display: inline-block; padding: 10px 20px; border: 1px solid #ccc; background-color: #fff; color: #333; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; font-weight: bold; }改成中间分开的两个
时间: 2024-02-23 13:01:02 浏览: 25
如果需要将 `.login-btn` 和 `.register-btn` 放在不同的位置,可以使用类似以下的方式分别设置样式:
```css
.login-btn {
display: block;
margin: 0 auto;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.register-btn {
display: block;
margin: 0 auto;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
```
在上面的样式中,`.login-btn` 和 `.register-btn` 分别设置了 `display: block;` 和 `margin: 0 auto;`,使其在水平方向上居中对齐。此时两个按钮会分别占据一整行,需要根据实际情况调整布局。
相关问题
.login-btn, .register-btn { display: inline-block; padding: 10px 20px; border: 1px solid #ccc; background-color: #fff; color: #333; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; font-weight: bold; }改成分开的两个
可以将 `.login-btn` 和 `.register-btn` 分别设置样式,如下:
```css
.login-btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.register-btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
```
在上面的样式中,`.login-btn` 和 `.register-btn` 分别设置了相同的样式,这两个样式在属性上是一样的。只是通过分别设置 `.login-btn` 和 `.register-btn` 来实现不同的样式细节,可以根据实际需要进行调整。
.login-btn, .register-btn { /* 按钮的样式 */ }补全,最基础样式
以下是最基础的登录按钮和注册按钮的样式:
```css
.login-btn,
.register-btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
```
在上面的样式中,`.login-btn` 和 `.register-btn` 都被设置为 `display: inline-block;`,使其能够在同一行显示。同时,还设置了一些常见的按钮样式,如边框、背景色、字体颜色、字体大小等。可以根据实际需要进行调整。