如何对齐表单上的选择和输入元素？答案

【问题标题】：How can I align select and input elements on a form?如何对齐表单上的选择和输入元素？
【发布时间】：2013-07-01 09:45:49
【问题描述】：

我的文本输入似乎居中对齐，但我的选择输入顶部对齐。
我该如何解决这个问题并让它们都相同？

当前 HTML 代码：

<td><input text-align="top" name="configuration[targets_attributes][0][name]" id="configuration_targets_attributes_0_name" size="30" value="bob" type="text"></td>
<td><li class="select input required" id="configuration_targets_attributes_0_maximum_fte_input"><select id="configuration_targets_attributes_0_maximum_fte" name="configuration[targets_attributes][0][maximum_fte]"><option value="1.0" selected="selected">1.0</option>
<option value="0.9">0.9</option>
<option value="0.8">0.8</option>
...
</select>
</li></td>

【问题讨论】：

你能发布你的 CSS 吗？
你能为此创建 jsfiddle 吗？
在您的选择框顶部添加 5 像素的边距。另外，您为什么要将您的选择包装在<li> 元素以及<td> 中？ <li> 应该包裹在 <ul> 或 <ol> 元素中，而不是单独包裹。在这种情况下，这只是更多的浪费标记，因为它们似乎没有任何作用。
这个问题来自一个有 20.5k 分的人。没有错或坏，但有点不寻常。

标签： html select layout input alignment

【解决方案1】：

我会首先与您的容器保持一致。您将输入直接放在 td 中，但将选择放在 li 中。尝试将它们放在同一个容器中。您可能不想在此处使用 li，因为它不在列表中。所以我可能会在第二个 td 中摆脱 li。

【讨论】：

【解决方案2】：

必须是您的 CSS。无需任何样式即可正常工作：http://jsfiddle.net/32mxD/1/

此外，正如其他建议的那样，从一致性和最佳实践的角度来看，在 TD 中包含 LI 然后在 LI 中包含 Select 并不是一个好主意

【讨论】：

【解决方案3】：

正如Callan所说，去掉td中的li

JSFiddle : http://jsfiddle.net/s8KR3/

如果您仍然遇到同一行上的元素处于不同高度的问题，您应该使用

td {
    vertical-align: middle;
}

在你的 CSS 中。请注意，如果它没有正确对齐，可能是由于您已经添加了另一个 css 规则，但没有在此处发布。

【讨论】：

【解决方案4】：

您正在使用text-align HTML 属性，据我所知，该属性不存在。相反，由于您在表格中有此内容，因此您应该使用 CSS 属性 vertical-align: middle。

您的<td> 标签内也有<li> 元素，我认为这也是无效的。 <li> 元素只能是 <ul> 或 <ol> 标签的子元素。

话虽如此，使用<table> 并不适合这种用途。可以做到，但可能有更好的方法，可能使用浮动 div。表格用于表格数据，而不是用于布局。或者也许摆脱桌子并使用带有浮动<li>标签的<ul>。

这是一个使用带有浮动<li> 标签的<ul> 的示例：http://jsfiddle.net/LU3VU/

【讨论】：