Блог

Следующий 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-способ получения новой строки после каждого элемента ввода и метки?

вы можете использовать псевдоселектор css3 :after для вставки разрыва строки после каждой метки, делая список вертикальным.

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

живая демонстрация: Fiddle

Это более семантически лучше.

Вы не должны размещать элементы формы внутри диапазона, а использовать DIV.

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

Для

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

И способ, которым вы должны обернуть ЯРЛЫК,

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

Затем вы можете использовать CSS selector лучшим семантическим способом

 .buttonset label {
    display: block;
}