css - 垂直放置样式系列的单选按钮

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;
}

像这样使用label包装每个input

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

Demo

---

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

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

Demo (标记没有变化)

Note: Use #form_comparison label instead of only label as it will select and apply all label element in your website where #form_comparison label will only select label elements inside #form_comparison