Html/css對齊難度（標籤，輸入，範圍）

Question

我忙於創建表單的標準。我的表單由div，標籤，輸入，跨度構建。

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