html - V-align 顶部在 TD 内不起作用

Question

我有一个带有如下呈现 HTML 的 asp.net gridview（仅第一列）

我想将所有三个控件对齐到 TD 内的顶部。

我尝试添加vertical-align: top;到 TD，但没有按预期工作。它在顶部显示了一些空格。我还尝试在 TD 中添加 DIV，在 DIV 中放置控件并设置 DIV 的 CSS 属性vertical-align:top; display: table-row;

它也没有用。这个问题在 chrome 和 IE 中不是 FF

<td>      
        <input id="ctl00_PH_GridViewOrderDetails_ctl02_cbView" type="checkbox" name="ctl00$PH$GridViewOrderDetails$ctl02$cbView"
            onclick="chkSelect(this.checked, this.id, 'chkView', 'cbView');">
        <span id="ctl00_PH_GridViewOrderDetails_ctl02_LineNo" style="font-size: 11px;">100 (10)</span>
        <img title="k@abc.com" src="Images/email.gif" >

</td>

Answer 1

您需要将 vertical-align: top 添加到 td 上的所有项目而不是 td 元素：

td.yourIDorClass input, 
td.yourIDorClass img, 
td.yourIDorClass span {

    vertical-align: top;
}

或者您可以在后面的代码中为所有控件添加属性

youcontrolId.Attributes.Add("style", "vertical-align: top");

Answer 2

在 td givevalign="top"或 inside give中做这个verticle-align:top;

演示

  span, input{
    vertical-align:top; 
}