输入框对齐？

Posted 2023-03-05

【中文标题】输入框对齐？

【英文标题】：Input Box Alignment?

【发布时间】：2011-11-26 10:31:42

【问题描述】：

如果文本中的文本比其他文本长，我如何让我的框相互对齐。

我在一个无序列表中有整个表单。

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

http://jsfiddle.net/EFByC/

【参考方案1】：

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

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

【讨论】：

在输入周围包裹标签是将标签与字段相关联的一种方法。单击标签然后将焦点放在该字段上。你这样做的方式没有关联，所以没有焦点，可访问性很差。我按照 Peter 在他的回答中展示的方式进行操作，使用 for=".." 限定符将标签和字段绑定在一起。

@StephenP 好点。我只关注我忘记了for 限定符的样式。我什至没有注意到所有name 属性都是相同的！不管怎样，它已经更新了。

【参考方案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.

【讨论】：

该演示在 IE8 中运行良好，但（由于某种原因）在 Chrome (v.24) 中无法运行。

【参考方案3】：

添加一个字段集，为其设置一个宽度。使您的输入和标签显示：块；正确浮动您的输入

【参考方案4】：

你有几个选择，真的：

按照 Kevin 的建议将输入浮动到右侧（设置 UL 的宽度以控制间距）。 将输入拉出标签，并给标签一个固定的宽度（如彼得的回答）。 在标签内，将标签文本包裹在一个跨度中，并为该跨度提供一个固定宽度（与第一个选项一样，这将使输入保持在标签内 - 见下文）。

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

希望这会有所帮助！

【参考方案5】：

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

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

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

【讨论】：

“输入字段不应嵌套在标签中”你能备份吗？ w3c 推荐它；它有利于可访问性

@albert - 我同意。我在答案中链接了一个相关问题，以及标签之前、之后和内部的标准 OKs 输入。哪个是“最好的”归结为个人喜好——主要是 HTML 纯粹主义者（“标签是一个单独的元素 - 不是包含元素”）和那些更喜欢简单和/或更少打字的人（“all that for=" xxx" 和 id="xxx" 业务有点乏味")。

@xavier 你是个好人。实际上，从可访问性的角度来看，几个月前 forrst 上有一个帖子说你不应该包装它们；关于屏幕阅读器阅读它们 2 倍的东西。但仅在某些情况下。那是负面的。包装它们的一个好处是增加了可点击区域（可用性）等等。永远不会太晚的人。总是在有用时添加您的输入！

【参考方案6】：

表单样式有多种方法。在这种情况下，您可以浮动输入，这将在不更改 html 的情况下为您提供所需的结果。

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