html - 有趣的 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>

一切看起来都很好，除了 Id Number 和 E-mail 文本输入看起来像是右对齐外，它们的对齐都是 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-label 的 div 宽度不够大。目前它设置为 100px。但是，如果您扩展它以适应 Confirm Password 的全部内容，那么它应该自行对齐。

下面是您的代码演示，其中 .editor-label 宽度设置为 200px。

http://jsfiddle.net/LuBUb/