html - 如何创建一个 2 列来分隔表单中的标签和输入元素

Question

我的表格看起来像:

**

    <p><label>first name</label><input type=text name=fn /></p>
    <p><label>last name</label><input type=text name=ln /></p>

</div>
<div id="rightform">
    <p><label>state</label><input type=text name=state /></p>
    <p><label>city</label><input type=text name=city /></p>

</div>

**

我想要这样的布局，所有标签都在左侧对齐(标签文本右对齐)，输入框全部对齐，向左浮动。

所以表单应该是这样的:

          asdf-label INPUTBOX
           123-label INPUTBOX
   yet-another-label INPUTBOX

上面的表格右边会有另外一个表格(id=#rightform)

真的很困惑如何正确地做到这一点......

Answer 1

我个人很少使用 float 技术，尽管它很常见。原因:对于更复杂的情况，它非常脆弱。

我几乎总是这样做:

<form ...>
  <p>
    <label for="id1">Label 1</label>
    <input id="id1" ... />
  </p>
  <p>
    <label for="id2">Label 2</label>
    <input id="id2" ... />
  </p>
</form>

和 CSS:

p {
  position: relative;
}
label {
  position: absolute;
  width: 150px;
  left: 0;
  top: Xpx /* x to align nicely with the baseline of the text in the input */
}
input {
  margin-left: 160px;
}

溢出

的多行标签很少出现问题。

为了使其在 IE6 和可能的 IE7 中工作，您需要添加一些东西来提供

hasLayout。缩放:1；做的伎俩，或指定宽度。