0

我正忙于为表格制定标准。我的表单是由 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 .. 而我想要的是它位于输入旁边（它的右边）而不是下面。

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

4

1 回答 1

1

display:block;从您的第二组 CSS 规则中删除，因为当元素的显示被阻止时，它会强制下一个元素位于其下方...

.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

于 2013-05-16T14:24:12.603 回答