Wie richtet man Optionsfelder und Beschriftungen in Formularen horizontal aus?

Horizontal ausgerichtete Optionsfelder und Beschriftungen

Beim Erstellen von Formularen kann es frustrierend sein, wenn Beschriftungen und Optionsfelder in verschiedenen Zeilen angezeigt werden. Um dieses Problem zu beheben und sie horizontal auszurichten:

Lösung:

Verschieben Sie die Beschriftungen und Optionsfelder nach links und passen Sie den Abstand und die Ränder nach Bedarf an. Weisen Sie außerdem den Optionsfeldern für ältere Versionen des Internet Explorers einen Klassennamen zu. Um eine identische Inline-Ausrichtung für alle Schaltflächen zu erreichen, verwenden Sie die folgende HTML-Struktur:

<code class="html"><fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y">
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z">
    <label for="z">Thing 2</label>
  </div>
</fieldset></code>

<code class="css">fieldset {
  overflow: hidden;
}

.some-class {
  float: left;
  clear: none;
}

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

Durch Befolgen dieser Richtlinien können Sie sicherstellen, dass Beschriftungen und Optionsfelder in derselben Zeile angezeigt werden, was für einen nahtlosen Benutzer sorgt Erfahrung im Ausfüllen von Formularen.

Das obige ist der detaillierte Inhalt vonWie richtet man Optionsfelder und Beschriftungen in Formularen horizontal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!