Question

我有一个asp.net gridview，其渲染的HTML如下（仅第一列）

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

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

的CSS属性

它也不起作用。此问题在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

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

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

    vertical-align: top;
}

或者您可以在

后面的代码中为所有控件添加属性

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

Answer 2

在td中给出valign="top"或在给予verticle-align:top;

之内

<强> DEMO

  span, input{
    vertical-align:top; 
}

V-align顶部不在TD内部工作

2 个答案: