Question

如果文本中的文本比其他文本长，我怎么能让我的盒子彼此对齐。

我将整个表格放在无序列表中。

我通过jsFiddle复制并显示了代码，你可以在这里找到我所说的......

http://jsfiddle.net/EFByC/

Answer 1

您的<label>标记正在包裹<input>标记，导致尝试使用CSS单独处理它们的问题：

http://jsfiddle.net/EFByC/3/

Answer 2

我建议您像这样更改表单HTML

<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li>
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li>
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li>
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li>
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li>
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li>

为每个表单字段指定唯一ID
不要在标签
您可以使用标签上的for属性将其连接到输入。

向#form-container label添加css规则，为其提供特定的宽度：

width: 210px;

See demo

Answer 3

为什么你在<ul>中标记了表格，这不是必须的。

为了获得更好，更易读的布局，我建议您在输入字段的顶部放置标签。像这样：

http://jsfiddle.net/Claudius/EFByC/9/

Answer 4

添加一个字段集，在其上放一个宽度。使您的输入和标签显示：阻止;将您的输入正确浮动

Answer 5

你有几个选择，真的：

将输入浮动到右侧，就像Kevin建议的那样（设置UL的宽度来控制间距）。
将输入拉出标签，并为标签指定固定宽度（如Peter的答案）。
在标签内，将标签文本包装在一个范围内，并将该范围赋予固定宽度（这与第一个选项一样，将使输入保持在标签内 - 见下文）。

请注意，虽然很多人都说在标签内输入是不好的，但这不一定是真的（它肯定在标准中 - 请参阅this question了解更多信息）。将输入包装在标签中可以让您获得“点击名称并集中字段”的行为，而无需指定一堆丑陋的'for =“无论”属性。

希望这有帮助！

Answer 6

有几种方法可以形成样式。在这种情况下，您可以浮动输入，这将为您提供所需的结果，而无需更改html。

参见演示：http://jsfiddle.net/EFByC/8/

输入框对齐？

6 个答案: