Question

我有以下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，如何垂直放置单选按钮，以便标签在各自的单选按钮之后显示在同一行？

Answer 1

我不知道你为什么要在td元素中包装它，如果你正在设计表单布局，而不是忽略表并使用div来设计表单。回到你的问题，你可以将标签包裹在input标签周围，并使用display: block;来label

#form_comparison label {
    display: block;
}

使用input像这样<{1}}包裹每个label

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

Demo

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

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

Demo（标记中没有变化）

注意：尽量使用#form_comparison label代替label 选择并应用您网站中的所有label元素 #form_comparison label只会在内部选择label个元素 #form_comparison

Answer 2

Working FIDDLE Demo 的

浮动您的input和label，第二行clear float以创建新行：

#form_comparison input {
    float: left;
}

#form_comparison label {
    float: left;
}

#form_comparison label + input {
    clear: both;
}

垂直位置样式系列的单选按钮

2 个答案: