如何创建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

我个人很少使用浮动技术，即使它很常见。原因：对于更复杂的情况，它非常脆弱。

我几乎总是这样做：

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

带有<p>溢出的多行标签很少有问题。

为了使其能够在IE6和IE7中正常工作，您需要添加一些内容以提供<p> hasLayout。缩放：1；绝招，或指定宽度。