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/