包含复选框的 div 掉落在 Firefox 和 chrome 中的包含 div

【问题标题】：Div containing checkbox falling down the containing div in firefox and chrome包含复选框的 div 掉落在 Firefox 和 chrome 中的包含 div
【发布时间】：2014-01-27 21:58:05
【问题描述】：

我有一个类似的结构

<div>
    <label>
        Name</label>
        <div style="text-align: right;">
    <input type="checkbox" value="1" name="chbName" class="checkbox" id="chbName"
        runat="server" checked="checked" /></div>
</div>

和类似这些类似的元素在 asp TableCell 中，由于某种原因，名称和复选框没有水平排列。它就像包含复选框的 div 在 UI 中下降了一步。这仅在 chrome 和 Mozilla 中发生。

【问题讨论】：

标签： html asp.net dhtml

【解决方案1】：

div 是块级元素 - 它会出现在标签下方，除非您为其指定以下样式之一：

display:inline;
display:inline-block;
float:left; (or right)

例如

<div style="text-align: right; display:inline-block;">

【讨论】：

感谢 Pete，display:inline-blockn 在所有浏览器中都像一个魅力。

【解决方案2】：

替换

<div style="text-align: right;">

由

<div style="float: right;">

您的完整 HTML 代码如下...

     <div>
        <label>
            Name</label>
        <div style="float: right;">
            <input type="checkbox" value="1" name="chbName" class="checkbox" id="chbName" runat="server"
                checked="checked" /></div>
    </div>

【讨论】：