如何并排放置复选框？答案

【问题标题】：How to place checkboxes side by side?如何并排放置复选框？
【发布时间】：2009-07-29 15:00:39
【问题描述】：

我正在使用标签输入对，标签样式如下，但是当我在同一行上使用两个 CheckBox 控件时，复选框标签（控件属性 [erties，不是单独的标签控件）一起出现两个复选框的左侧。

    label
    {
        float: left;
        width: 150px;
        padding-right: 10px;
        text-align: right;
    }

【问题讨论】：

标签： asp.net css

【解决方案1】：

由于float: left 规则，标签一起出现。您可以为未与输入左侧对齐的复选框标签定义不同的 css 规则。

【讨论】：

【解决方案2】：

正如 Kirschstein 所说，您可以将输入/标签对包装在 div 中，然后浮动 div。

或者您可以将浮点数应用于输入以及标签。最后一个建议假设您的代码如下所示：

<label for="input1">Input 1</label>
<input type="checkbox id="input1" name="input1" />
<label for="input2">Input 1</label>
<input type="checkbox id="input2" name="input2" />

【讨论】：

【解决方案3】：

使用视图源查看呈现的 html。您可能会发现复选框的标签呈现为单独的标签，而不是复选框的一部分。尝试将每个 Checkbox 控件包装在一个 div 中。

【讨论】：

【解决方案4】：

只需删除“float:left”css 规则即可。标签和输入被呈现为内联元素，因此它们将“默认”位于同一行。

【讨论】：

我把浮动放在左边给我一个固定的标签宽度。

【解决方案5】：

如果想法是给标签宽度，您可以将它们设置为“显示：内联块”，但这可能不适用于某些旧浏览器。

http://www.quirksmode.org/css/display.html

【讨论】：