CSS表格佈局有趣

Question

我有一個奇怪的問題。我有一個ASP.Net MVC 3個網站，包含用戶註冊頁面與下面的標記：

<div> 
    <fieldset> 
     <legend>Personal Information</legend> 
     <div class="editor-label"> 
      First Name 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("Firstname") 
     </div> 
     <div class="editor-label"> 
      Last Name 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("Lastname") 
     </div> 
     <div class="editor-label"> 
      Employee Number 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("EmployeeNo") 
     </div> 
     <div class="editor-label"> 
      Id Number 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("Idnumber") 
     </div> 
     <div class="editor-label"> 
      Date of birth 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("Dob") 
     </div> 
     <div class="editor-label"> 
      Cell Number 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("CellNumber") 
     </div> 
    </fieldset> 
    <fieldset> 
     <legend>Site Preferences</legend> 
     <div class="editor-label"> 
      Username 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("Username") 
     </div> 
     <div class="editor-label"> 
      Password 
     </div> 
     <div class="editor-field"> 
      @Html.Password("Password") 
     </div> 
     <div class="editor-label"> 
      Confirm Password 
     </div> 
     <div class="editor-field"> 
      @Html.Password("Confirm") 
     </div> 
     <div class="editor-label"> 
      E-mail 
     </div> 
     <div class="editor-field"> 
      @Html.TextBox("Email") 
     </div> 
     <p> 
      <input type="submit" value="Register" /> 
     </p> 
    </fieldset> 
</div> 

一切看起來很好，它們的排列是100％，除了身份證號碼和電子郵件的文本輸入看上去像其右對齊。 CSS中使用的樣子：

form 
    { 
     margin: 0; 
     padding: 0; 
    } 
    fieldset 
    { 
     margin: 1em 0; 
     border: none; 
     border-top: 1px solid #ccc; 
    } 
    legend 
    { 
     margin: 1em 0; 
     padding: 0 .5em; 
     color: #036; 
     background: transparent; 
     font-size: 1.3em; 
     font-weight: bold; 
    } 
    label, .editor-label 
    { 
     float: left; 
     width: 100px; 
     padding: 0 1em; 
     text-align: right; 
    } 
    fieldset div 
    { 
     margin-bottom: .5em; 
     padding: 0; 
     display: block; 
    } 
    fieldset div input, fieldset div textarea 
    { 
     width: 150px; 
     border-top: 1px solid #555; 
     border-left: 1px solid #555; 
     border-bottom: 1px solid #ccc; 
     border-right: 1px solid #ccc; 
     padding: 1px; 
     color: #333; 
    } 
    fieldset div select 
    { 
     padding: 1px; 
    } 
    div.fm-multi div 
    { 
     margin: 5px 0; 
    } 
    div.fm-multi input 
    { 
     width: 1em; 
    } 
    div.fm-multi label 
    { 
     display: block; 
     width: 200px; 
     padding-left: 5em; 
     text-align: left; 
    } 
    #fm-submit 
    { 
     clear: both; 
     padding-top: 1em; 
     text-align: center; 
    } 
    #fm-submit input 
    { 
     border: 1px solid #333; 
     padding: 2px 1em; 
     background: #555; 
     color: #fff; 
     font-size: 100%; 
    } 
    input:focus, textarea:focus 
    { 
     background: #efefef; 
     color: #000; 
    } 
    fieldset div.fm-req 
    { 
     font-weight: bold; 
    } 
    fieldset div.fm-req label:before 
    { 
     content: "* "; 
    } 

    #container 
    { 
     margin: 0 auto; 
     padding: 1em; 
     width: 350px; 
     text-align: left; 
    } 
    p#fm-intro 
    { 
     margin: 0; 
    } 

我缺少什麼，爲什麼它只是兩個領域就是所有錯了嗎？

謝謝！

Answer 1

帶有.editor標籤類的div的寬度不夠大。目前它設置爲100px。但是，如果你擴展到適合Confirm Password的全部內容，那麼它應該自己調整。

下面是一個代碼示例，其中.editor-label的寬度設置爲200px。

http://jsfiddle.net/LuBUb/