Question

我有一堆同一类的div ...这是代码

<div class="login-input"><span>Username</span><input type="text"></div>
<div class="login-input last-login-input"><span>Password</span><input type="text"></div>

所有div只有一个相同的类，即登录输入然后我想为最后一个div添加另一个类，即last-login-input，指定最后一个div的border-bottom 这是代码

.last-login-input{
border-style: solid;
border-width: 1px;
border-bottom-width: 1px;
border-bottom-color: #BABABA;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

这是我的.login输入类

#wrapper #login-form .login-input{
border-style: solid;
border-width: 1px 1px 0;
border-color: #BABABA;
width: 400px;
height: 50px;
float: left;
background-color: #FFF;
}

但是当我将.last-login-input添加到我的上一个div时，它没有显示border-bottom ......

有什么建议吗？

提前致谢

Answer 1

使用以下CSS代码：

＆＃13;

.input {
  border: 1px solid gray;
  display: block;
  margin: 2px;
}
.last {
  border-bottom: 5px solid red;
}

＆＃13;

<input type="text" class="input" />
<input type="password" class="input last" />

＆＃13;

希望这有帮助！

Answer 2

＆＃13;

.login-input {
  border-style: solid;
  border-width: 1px 1px 0px 1px;
  border-color: #BABABA;
  width: 400px;
  height: 50px;
  float: left;
  background-color: #FFF;
}
.last-login-input {
  border-style: solid;
  border-width: 1px;
  border-bottom-color: #BABABA;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

＆＃13;

<div class="login-input"><span>Username</span>

  <input type="text">
</div>
<div class="login-input last-login-input"><span>Password</span>

  <input type="text">
</div>

＆＃13;

Answer 3

更改border-width 1px 1px 1px

第三个用于下垫

使最后一个div只有border-bottom

3 个答案: