Размещение переключателей и меток на одной строке

В формах HTML выравнивание переключателей и связанных с ними меток на одной строке можно выполнить следующим образом: испытывающий. Для этого можно использовать несколько методов CSS.

Предложенная структура HTML позиционирует метку и элементы ввода:

First Item

Чтобы выровнять их по горизонтали, добавьте следующие правила CSS:

label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}

При этом метка и переключатель располагаются рядом друг с другом. Чтобы гарантировать, что несколько переключателей выровнены на одной строке, используйте следующую разметку:

  

    
    Thing 1
    
    Thing 2
  

При использовании соответствующих правил CSS переключатели и метки будут выровнены на одной линии.