Question

我正在使用以下css来设置两个列的表单布局。我无法做对。

以下是问题的屏幕截图： enter image description here

以下是涉及的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

由于表格布局已经完成了死亡，它们确实是一个解决的问题。我建议您查看现有的解决方案，而不是战斗，例如brilliant semantic markup中找到的Formastic模式。

如果你觉得自己不得不自己解决这个问题，那么如果你重新组织一下你的标记，你会有更轻松的时间：

<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;
}

通过这种方式，您可以为表单的每个“行”设置一个块范围，并且标签与其各自的输入字段和错误更紧密相关。

Answer 2

尝试在每个标签/输入组周围添加一个容器，并为容器指定宽度。

.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/

使用浮动DIV创建两个列表单布局，无法清除：在IE8中右键

2 个答案: