代码之家  ›  专栏  ›  技术社区  ›  Nap

表项在td内添加控件时垂直对齐方式发生更改

  •  1
  • Nap  · 技术社区  · 15 年前

    我一直在想这个。为什么在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 “。但是,文本 选择值2 “稍微向下,不居中,不与对齐” 第2行 “。

    我已经试过垂直居中对齐,甚至是垂直对齐,但它不起作用。它在IE和火狐中都会发生。更明显的是,我真的不明白。

    3 回复  |  直到 8 年前
        1
  •  1
  •   pstanton    15 年前

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

    如果将所有文本的行高更改为较大的值,则它们都将对齐。

    td  {line-height:500%;}
    
        2
  •  1
  •   JasonWyatt    15 年前

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

    您应该能够通过向左浮动输入控件,或者通过更改 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>
    
        3
  •  0
  •   Nap    15 年前

    当我尝试将垂直居中的控件添加到 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>