html - 使最后一个 div 只有 border-bottom

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-input 类

#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 代码:

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

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

希望这对您有所帮助!