Question

我一直在想这个。为什么在将控件放入其中时，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>

“第1行”文字与“所选值1 ”对齐。但是，“选定值2 ”文字略有下降且未居中且未与“第2行”对齐。

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

Answer 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>

Answer 2

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

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

td  {line-height:500%;}

Answer 3

当我尝试将垂直对齐的中间添加到 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>

在TD内添加控件时，表项垂直对齐更改

3 个答案: