如何在表单上对齐选择和输入元素？

Question

我的文字输入似乎居中对齐，但我的选择输入是顶部对齐的 我怎样才能解决这个问题并使它们都相同？

当前的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>

Answer 1

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

Answer 2

您使用的是text-align HTML属性，据我所知，该属性不存在。相反，既然你在表中有这个，你应该使用CSS属性vertical-align: middle。

您的<li>标记中也直接包含<td>个元素，我认为这些元素也无效。 <li>元素只能是<ul>或<ol>标记的子元素。

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

以下是使用带有<ul>个浮动广告的<li>代码的示例：http://jsfiddle.net/LU3VU/

Answer 3

一定是你的CSS。没有任何样式，它工作正常：http://jsfiddle.net/32mxD/1/

此外，正如其他人所建议的那样，从一致性和最佳做法的角度来看，在LI中拥有TD然后在LI

Answer 4

正如卡兰所说，摆脱td内的李

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

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

td {
    vertical-align: middle;
}

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