将radiobuttons和Labels垂直放置在纯净的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方法来获取新行？

Answer 1

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

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

现场演示： Fiddle

Answer 2

这在语义上更好。

你不应该在SPAN中使用表单元素，而是使用DIV。

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

到

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

你应该如何包装LABEL

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

然后，您可以以更好的语义方式使用CSS选择器

.buttonset label {
    display: block;
}