使用CSS對齊登錄表單（帶有錯誤文本）

Question

我希望這將是一個簡單的解決方案。我正在嘗試創建一個如下所示的登錄表單：

Email ...... |文本框|錯誤文本
密碼|文本框|錯誤文本

我遇到的問題是用於排列文本框的CSS（內聯塊）將錯誤文本強制到新行。所以我得到：

Email ...... |文本框
錯誤文本
密碼|文本框
錯誤文本

這是迄今爲止代碼：

HTML

<form method="post"> 

    <p> 
    <label for="email">Email </label> 
    <input type="text" name="email" value=""> </input> 
    <div class="error"> Email Error </div> 
    </p> 


    <p> 
    <label for="password">Password </label> 
    <input type="password" name="password" value=""> </input> 
    <div class="error"> Password Error </div> 
    </p> 

    <input type="submit" value="Login"> 

</form> 

CSS

form 
{ 
    display: inline; 
} 

p label 
{ 
    display:inline-block; 
    width: 60px; 
} 

p input 
{ 
    width: 150px; 
} 

.error 
{ 
    color:red; 
} 

http://jsfiddle.net/CF76f/

Answer 1

使用範圍，而不是div標籤顯示錯誤

Answer 2

正如我在你的小提琴，你的div標籤產生額外的「P」的標籤已經看到或者它呈現外「P」。 我將你的'div'標籤改爲'span'，它似乎工作正常。

更新您的HTML如下所述：

<form method="post"> 

    <p> 
    <label for="email">Email </label> 
    <input type="text" name="email" value=""> </input> 
    <span class="error"> Email Error </span> 
    </p> 


    <p> 
    <label for="password">Password </label> 
    <input type="password" name="password" value=""> </input> 
    <span class="error"> Password Error </span> 
    </p> 

    <input type="submit" value="Login"> 

</form> 

Answer 3

這裏是一個標準的解決方案。首先，您可以使用float：left而不是inline-block，兩種解決方案都可以。您不需要將表單內聯。在p中推div也不是很「優雅」。

http://jsfiddle.net/CF76f/12/

<form method="post"> 

    <div class="field"> 
     <label for="email">Email </label> 
     <input type="text" name="email" value="" /> 
     <div class="error"> Email Error </div> 
    </div> 

    <div class="field"> 
     <label for="password">Password </label> 
     <input type="password" name="password" value="" /> 
     <div class="error"> Password Error </div> 
    </div> 

    <div class="clear"></div> 

    <input class="submit" type="submit" value="Login" /> 

</form> 

div.field { 
    clear:both ; 
} 

div.field label { 
    display:block ; 
    width: 60px ; 
    clear:both ; 
    float:left ; 
    padding-right:10px ; 
} 

div.field input { 
    width: 150px ; 
    display:block ; 
    float:left ; 
} 

div.field div.error { 
    color:red; 
    display:block ; 
    float:left ; 
    padding-left:10px ; 
} 

input.submit { 
    clear:both ; 
    margin-top:10px ; 
} 

.clear { clear:both ; font-size:0 ; overflow:hidden ; height:0 ; }