Positionieren von Optionsfeldern und Beschriftungen in derselben Zeile

In HTML-Formularen kann es sinnvoll sein, Optionsfelder und die zugehörigen Beschriftungen in einer einzelnen Zeile auszurichten herausfordernd. Um dies zu erreichen, können mehrere CSS-Techniken eingesetzt werden.

Die vorgeschlagene HTML-Struktur positioniert die Beschriftungs- und Eingabeelemente:

First Item

Um sie horizontal auszurichten, fügen Sie die folgenden CSS-Regeln hinzu:

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;
}

Dadurch werden die Beschriftung und das Optionsfeld nebeneinander positioniert. Um sicherzustellen, dass mehrere Optionsfelder in derselben Zeile ausgerichtet sind, verwenden Sie das folgende Markup:

  

    
    Thing 1
    
    Thing 2
  

Mit den entsprechenden CSS-Regeln werden die Optionsfelder und Beschriftungen in derselben Zeile ausgerichtet.