Html/css 对齐难度（标签、输入、跨度）答案

【问题标题】：Html/css aligning difficulty (label, input, span)Html/css 对齐难度（标签、输入、跨度）
【发布时间】：2013-05-16 13:59:34
【问题描述】：

我正忙于创建表单标准。我的表单是由 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 显示它。发生的事情是跨度低于 INPUT .. 而我想要的是它位于输入旁边（它的右边）而不是下面。

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

【问题讨论】：

也许你可以将它包装在一个 div 或 span 中？

标签： css input label html

【解决方案1】：

从你的第二组css规则中删除display: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

【讨论】：

哈哈哇，我在这部剧上花了几个小时……而且很简单：）非常感谢！学到了一些新东西;)