【发布时间】：2011-11-26 10:31:42
【问题描述】：
如果文本中的文本比其他文本长，我如何让我的框相互对齐。
我在一个无序列表中有整个表单。
我已经通过jsFiddle复制并展示了代码，你可以在这里找到我所说的......
【问题讨论】：
标签： css forms xhtml input alignment
【发布时间】：2011-11-26 10:31:42
【问题描述】：
您的 <label> 标记包裹了 <input> 标记，这导致尝试使用 CSS 单独处理它们的问题：
【讨论】：
-
在输入周围包裹标签是将标签与字段相关联的一种方法。单击标签然后将焦点放在该字段上。你这样做的方式没有关联，所以没有焦点，可访问性很差。我按照 Peter 在他的回答中展示的方式进行操作，使用
for=".."限定符将标签和字段绑定在一起。 -
@StephenP 好点。我只关注我忘记了
for限定符的样式。我什至没有注意到所有name属性都是相同的！不管怎样，它已经更新了。
我建议您像这样更改表单 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;
【讨论】：
-
该演示在 IE8 中运行良好，但（由于某种原因）在 Chrome (v.24) 中无法运行。
添加一个字段集，为其设置一个宽度。使您的输入和标签显示：块；正确浮动您的输入
【讨论】：
你有几个选择，真的：
- 按照 Kevin 的建议将输入浮动到右侧（设置 UL 的宽度以控制间距）。
- 将输入拉出标签，并给标签一个固定的宽度（如彼得的回答）。
- 在标签内，将标签文本包裹在一个跨度中，并为该跨度提供一个固定宽度（与第一个选项一样，这将使输入保持在标签内 - 见下文）。
请注意，虽然很多人都说在标签内输入是不好的，但这并不一定是正确的（这绝对是标准 - 请参阅this question 了解更多信息）。将输入包装在标签中可以让您获得“单击名称并聚焦字段”行为，而无需指定一堆丑陋的“for="whatever"”属性。
希望这会有所帮助！
【讨论】：
你为什么要在<ul> 中标记表格，这不是必需的。
为了获得更好、更易读的布局，我建议您将标签放在输入字段的顶部。 像这样的：
【讨论】：
-
“输入字段不应嵌套在标签中”你能备份吗？ w3c 推荐它；它有利于可访问性
-
@albert - 我同意。我在答案中链接了一个相关问题，以及标签之前、之后和内部的标准 OKs 输入。哪个是“最好的”归结为个人喜好——主要是 HTML 纯粹主义者（“标签是一个单独的元素 - 不是包含元素”）和那些更喜欢简单和/或更少打字的人（“all that for=" xxx" 和 id="xxx" 业务有点乏味")。
-
@xavier 你是个好人。实际上，从可访问性的角度来看，几个月前 forrst 上有一个帖子说你不应该包装它们；关于屏幕阅读器阅读它们 2 倍的东西。但仅在某些情况下。那是负面的。包装它们的一个好处是增加了可点击区域（可用性）等等。永远不会太晚的人。总是在有用时添加您的输入！
表单样式有多种方法。在这种情况下，您可以浮动输入，这将在不更改 html 的情况下为您提供所需的结果。
【讨论】：