使用浮動DIV創建兩個列窗體佈局，無法清除：在IE8

Question

我正在使用以下CSS風格兩列窗體佈局使用。我很難說得對。

這裏的問題的截圖：

這裏是所涉及的CSS：

.editor-label, .display-label{ 
    font-size:14px; 
    font-weight:bold; 
    float:left; 
    width:160px; 
    padding-top:8px; 
    display: block; 
    clear: left; 

} 

.editor-field 
{   
    padding-top: 8px; 
    float: left; 
    clear: right; 
    width: 300px; 
    display: block;   
} 

的HTML是相當簡單：

<div class="editor-label"> 
     <label for="UserIdentitiy">*User Name</label> 
    </div> 

    <div class="editor-field"> 
      <input class="text-box single-line" data-val="true" data-val-required="Please provide a user name." id="UserIdentitiy" name="UserIdentitiy" type="text" value="" /> 
      <span class="field-validation-valid" data-valmsg-for="UserIdentitiy" data-valmsg-replace="true"></span> 
    </div> 

    <div class="editor-label"> 
      <label for="SS">Social Security</label> 
    </div> 
    <div class="editor-field"> 
      <input class="text-box single-line" id="SS" name="SS" type="text" value="" /> 
      <span class="field-validation-valid" data-valmsg-for="SS" data-valmsg-replace="true"></span> 
    </div> 

Answer 1

嘗試將一個容器周圍的每個標籤/輸入組，並給容器一個寬度。

.field-container{width:460px} 

HTML

<div class="field-container"> 
     <div class="editor-label"> 
      <label for="UserIdentitiy">*User Name</label> 
     </div> 
     <div class="editor-field"> 
      <input class="text-box single-line" data-val="true" data-val-required="Please provide a user name." id="UserIdentitiy" name="UserIdentitiy" type="text" value="" /> 
      <span class="field-validation-valid" data-valmsg-for="UserIdentitiy" data-valmsg-replace="true"></span> 
     </div> 
</div> 

http://jsfiddle.net/eqeB6/3/

Answer 2

隨着形式的佈局已經完成，以死亡，他們是一個真正的解決問題。我建議您查看現有的解決方案，例如Formastic中的brilliant semantic markup模式，而不是打架。

如果你覺得有必要自己解決問題，但是，你將有一個更簡單的時間，如果你重新組織你的標記一點：

<div class="form-field"> 
    <label for="UserIdentitiy">*User Name</label> 
    <input class="text-box single-line" data-val="true" data-val-required="Please provide a user name." id="UserIdentitiy" name="UserIdentitiy" type="text" value="" /> 
    <span class="field-validation-valid" data-valmsg-for="UserIdentitiy" data-valmsg-replace="true"></span> 
</div> 

<div class="form-field"> 
    <label for="SS">Social Security</label> 
    <input class="text-box single-line" id="SS" name="SS" type="text" value="" /> 
    <span class="field-validation-valid" data-valmsg-for="SS" data-valmsg-replace="true"></span> 
</div> 

而CSS：

.form-field { 
    clear: both; 
    display: block; 
    position: relative; 
    font-size: 14px; 
    padding-top: 8px; 
} 

.form-field label { 
    float: left; 
    width: 160px; 
    font-weight: bold; 
} 

.form-field .single-line { 
    display: inline-block; 
    width: 300px; 
} 

這樣你對錶單的每個「行」都有一個塊範圍，並且標籤與它們各自的輸入字段和錯誤更緊密地相關聯。