-1

我有以下html。

<td>
    <div id="form_comparison" class="field radio_field">
        <input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
        <label for="form_comparison_0">Increased</label>
        <input type="radio" id="form_comparison_1" name="form[comparison]" value="2" />
        <label for="form_comparison_1">About the same</label>
        <input type="radio" id="form_comparison_2" name="form[comparison]" value="3" />
        <label for="form_comparison_2">Decreased</label>
    </div>
</td>

使用 css，我如何垂直定位单选按钮，以便标签显示在同一行中它们各自的单选按钮之后？

4

2 回答 2

4

如果您正在设计表单布局，我不知道您为什么将其包装在一个td元素中，而不是忽略表格并div用于设计您的表单。提出您的问题，您可以将标签包裹在标签周围input并display: block;用于label

#form_comparison label {
    display: block;
}

像这样包装每个input使用label

<label for="form_comparison_0">
    <input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
    Increased
</label>

演示

如果您没有更改标记的任何权限，则可以使用 CSScontent属性，white-space: pre;这将为您提供所需的输出

label:after {
    content: "\A";
    white-space: pre;
    margin-bottom: 10px;
}

演示（标记没有变化）

注意：使用#form_comparison label而不是仅label，因为它将选择并应用label您网站中的所有元素，其中 #form_comparison label只会选择label内部元素 #form_comparison

于 2013-05-20T07:34:05.903 回答
2

Working FIDDLE Demo

浮动你的inputand label，对于第二行，clear创建float一个新行：

#form_comparison input {
    float: left;
}

#form_comparison label {
    float: left;
}

#form_comparison label + input {
    clear: both;
}
于 2013-05-20T07:44:39.353 回答