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

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 中摆脱 li。

Answer 2

You're using a text-align HTML attribute, which, to my knowledge, doesn't exist. Instead, since you have this in a table, you should be using the CSS property vertical-align: middle.

You also have <li> elements directly inside your <td> tags, which I believe is also invalid. <li> elements can only be children of either <ul> or <ol> tags.

Having said that, using a <table> is not really appropriate for this use. It can be done, but there may be a better way, possibly using floated divs. Tables are meant for tabular data, not for layout. Or perhaps get rid of the table and use a <ul> with floated <li>tags.

Here is an example using a <ul> with floated <li> tags: http://jsfiddle.net/LU3VU/

Answer 3

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

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

Answer 4

正如Callan所说，摆脱td中的li

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

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

td {
    vertical-align: middle;
}

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