Wie richte ich Optionsfelder und Beschriftungen in HTML auf derselben Zeile aus?

Optionsfelder und Beschriftungen auf derselben Zeile positionieren

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

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

<code class="html"><label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" /></code>

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

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

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

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

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

Das obige ist der detaillierte Inhalt vonWie richte ich Optionsfelder und Beschriftungen in HTML auf derselben Zeile aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!