Posicionando botões de opção e rótulos na mesma linha

Em formulários HTML, o alinhamento de botões de opção e seus rótulos associados em uma única linha pode ser desafiante. Para conseguir isso, diversas técnicas CSS podem ser empregadas.

A estrutura HTML sugerida posiciona o rótulo e os elementos de entrada:

First Item

Para alinhá-los horizontalmente, adicione as seguintes regras 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;
}

Isso posiciona o rótulo e o botão de opção um ao lado do outro. Para garantir que vários botões de opção estejam alinhados na mesma linha, use a seguinte marcação:

  

    
    Thing 1
    
    Thing 2
  

Com as regras CSS apropriadas, os botões de opção e os rótulos serão alinhados na mesma linha.