1

我一直在想这个。为什么在 td 中放置控件时，它的对齐会受到影响。

例如。

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" />
    <input type="button" value="Select" />
    Selected Value 2
  </td>
</tr>

“ Row 1 ”文本与“ Selected Value 1 ”对齐。但是，文本“ Selected Value 2 ”略微向下且未居中且未与“ Row 2 ”对齐。

我已经尝试过垂直对齐中间甚至 valign 并且它不起作用。它发生在 IE 和 Firefox 中。在IE中更明显。我真的不明白这一点。

4

3 回答 3

1

输入控件的行高与标准文本不同。因此，当您将这些本机内联控件放置在文本旁边时，它们会强制基线/行高的行为不同于没有它的文本的行为。如果您将图像放置在文本旁边而不浮动它（文本与图像底部对齐，直到它换行到下一行），也会发生这种情况。

您应该能够通过将输入控件浮动到左侧或可能通过更改line-height文本来规避此问题。

编辑：这对我来说似乎很好..

<table>
    <tr>
        <td>Row 1</td>
        <td>
            <input type="text" />
            <input type="button" value="Select" />
        </td>
        <td>Selected Value 1</td>
    </tr>
    <tr>
        <td style="">Row 2</td>
        <td style="line-height: 120%" colspan="2">  
            <input type="text" />  
            <input type="button" value="Select" />  
            Selected Value 2
        </td>
    </tr>
</table>
于 2009-12-21T04:48:04.183 回答
1

这是因为第二行中的组件与文本“内联”显示，并且组件的高度大于文本的行高。

如果您将所有文本的行高更改为更大的值，它们都会对齐。

td  {line-height:500%;}
于 2009-12-21T04:50:25.770 回答
0

当我尝试将垂直对齐的中间添加到td内的另一个控件时，它似乎将所有的都设置在中间。这是 IE 中的一种奇怪行为，但它确实解决了我的问题。

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" style="vertical-align: middle;" />
    <input type="button" value="Select" style="vertical-align: middle;" />
    Selected Value 2
  </td>
</tr>
于 2009-12-24T01:06:01.453 回答