输入框对齐？

Question

如果一个 <li> 中的文本比其他的更长，我该如何让它们对齐呢？

我的整个表单都在无序列表中。

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

http://jsfiddle.net/EFByC/

- Aaron Brewer

Answer 1

我建议你将表单的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属性将标签与输入框连接起来。

添加CSS规则到#form-container label，以给它们指定一个特定的宽度：

width: 210px;

See demo.

- Peter Olson

---

演示在IE8中运行良好，但（由于某种原因）在Chrome（v.24）中无法正常工作。 - kmote

Answer 2

您的<label>标签包含了<input>标签，这会导致在CSS中无法将它们分开处理，从而引起问题。请参考以下链接：

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

- Allen Liu

---

将标签包装在输入框周围是一种将标签与字段关联起来的方法。然后单击标签会使字段获得焦点。你现在的做法没有关联，因此没有焦点，并且可访问性较差。我使用Peter在他的答案中展示的方式，使用for=".."限定符将标签和字段绑定在一起。 - Stephen P

@StephenP 很好的观点。我只关注了样式，忘记了 for 限定符。我甚至没有注意到所有的 name 属性都是相同的！无论如何，已经更新了。 - Allen Liu

Answer 3

为什么你把表单标记为<ul>，这并不是必要的。

为了更好的布局和可读性，我建议你把标签放在输入框上方。就像这样：

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

- Muleskinner

---

输入字段不应嵌套到标签中。这是w3c推荐的，有助于提高可访问性。 - albert

@albert - 我同意。我在我的答案中链接了一个相关的问题，标准允许在标签之前、之后和内部输入。哪个是“最好”的取决于个人喜好 - 主要是HTML纯粹主义者（“标签是单独的元素 - 不是包含元素”）和那些喜欢简单和/或少打字的人之间的争论（“所有这些for =“xxx”和id =“xxx”的业务变得有点乏味”）。 - Xavier Holt

@xavier 你真是个好人。实际上，从可访问性的角度来看，几个月前在Forrst上有一个帖子说你不应该将它们包装起来；这与屏幕阅读器读取它们两次有关，但只在某些情况下。这是一个负面因素。包装它们的一个积极因素是增加可点击区域（可用性），以及其他一些因素。永远不会太晚。当有用时，随时添加你的意见！ - albert

Answer 4

添加一个fieldset，为其设置宽度。将你的输入框和标签设为display:block; 并将输入框向右浮动。

- albert

Answer 5

你有几个选择：

• 像Kevin建议的那样将输入框浮动到右侧（设置UL的宽度以控制间距）。
• 将输入框从标签中取出，并给标签一个固定的宽度（如Peter的答案所示）。
• 在标签内，将标签文本包装在一个span中，并给该span一个固定的宽度（这样，就像第一种选项一样，可以让输入框保持在标签内 - 请参见下面的内容）。

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

希望这可以帮助你！

- Xavier Holt

Answer 6

有几种方法可以进行表单样式设计。在这种情况下，您可以浮动输入框，这将使您获得所需的结果而不更改HTML。

查看演示：http://jsfiddle.net/EFByC/8/

- amosrivera