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显示：inline-block以使用jQuery显示它。发生的事情是，跨度低于INPUT ..而我想要的是它紧挨着输入（右边）而不是下面。

我尝试了很多事情，如果有人可以帮助我的话:)。

Answer 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

Html / css对齐难度（标签，输入，跨度）

1 个答案: