css - HTML/CSS 对齐困难(标签、输入、跨度)

Question

我正忙于创建表单标准。我的表单是由 div、label、input、span 构建的。

div class="formulier">
    <label for="gebruikersnaam">Gebruikersnaam</label>
    <input name="gebruikersnaam" type="text" class="disable_input"/>
    <span class="text_error" id="gebruikersnaam">Uw account is niet actief.</span>

    <label for="wachtwoord">Wachtwoord </label>
    <input name="wachtwoord" type="password" class="disable_input"/>
    <span class="text_error" id="wachtwoord">Gebruikersnaam en/of wachtwoord verkeerd.</span><
</div>

我得到的CSS是:

.formulier{
float: left;
margin-right: 15px;
margin-bottom: 15px;

.formulier label{
display: block;
margin-bottom: 5px;
}

.formulier select,
.formulier textarea,
.formulier .input-file,
.formulier input[type="url"],
.formulier input[type="tel"],
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="search"],
.formulier input[type="password"] {
width: 200px;
    display: block;
    margin-bottom: 15px;
    padding-left: 5px;
    height: 18px;
    color:#333;
}

.text_error{
color:red;
font-size: 90%;
display: none;
 }

我遇到的问题是，如果发生错误，我将 SPAN 放在 display: inline-block 中以使用 jQuery 显示它。发生的事情是跨度低于输入。我想要的是它位于输入旁边(右侧)而不是下方。

我已经尝试了很多东西所以如果有人可以帮助我:)

Answer 1

从您的第二组 css 规则中删除 display:block;，因为当一个元素的显示是 block 时，它会强制下一个元素在它下面...

.formulier select,
.formulier textarea,
.formulier .input-file,
.formulier input[type="url"],
.formulier input[type="tel"],
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="search"],
.formulier input[type="password"] {
width: 200px;
    /*display: block;*/
    margin-bottom: 15px;
    padding-left: 5px;
    height: 18px;
    color:#333;
}

这是一个jsfiddle