Question

我正在使用标签输入对，标签使用以下样式，但是当我在同一行上使用两个CheckBox控件时，复选框标签（控件prop [erties，而不是单独的Label控件]一起显示在左边的两个复选框。

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

Answer 1

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

Answer 2

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

Answer 3

正如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" />

Answer 4

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

Answer 5

如果想要给出标签宽度，可以将它们设置为“display：inline-block”，但这可能不适用于某些较旧的浏览器。

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

如何并排放置复选框？

5 个答案: