html - 在纯 css 中垂直定位单选按钮和标签

Question

以下 HTML 是从库中生成的，无法以任何方式更改，因此我需要一个纯 CSS 解决方案来解决我的问题。我希望单选按钮垂直显示，而不是像这样从左到右显示

这是我的代码。

<span class="buttonset" id="test">

      <input type="radio" id="test_1" name="test" value="CC">
      <label for="test_1">Option 1</label>

      <input type="radio" id="test_2" name="test" value="PL">
      <label for="test_2">Option 2</label>

      <input type="radio" id="test_3" name="test" value="AL">
      <label for="test_3">Option 3</label>

      <input type="radio" id="test_4" name="test" value="HL">
      <label for="test_4">Option 4</label>

      <input type="radio" id="test_5" name="test" value="CL">
      <label for="test_5">Option 5</label>

      <input type="radio" id="test_6" name="test" value="CL">
      <label for="test_6">Option 6</label>

  </span>

另见 http://jsfiddle.net/QHvhs/ 是否有纯 CSS 方法在每个 input 和 label 元素后换行？

Answer 1

您可以使用 css3 伪选择器 :after 在每个标签后插入换行符，使列表垂直。

.buttonset label:after {
    content:"\A"; 
    white-space:pre;
}

现场演示: Fiddle