Heim > Web-Frontend > CSS-Tutorial > Wie richtet man Optionsfelder und Beschriftungen in Formularen horizontal aus?

Wie richtet man Optionsfelder und Beschriftungen in Formularen horizontal aus?

Susan Sarandon
Freigeben: 2024-11-04 06:05:28
Original
800 Leute haben es durchsucht

How to Align Radio Buttons and Labels Horizontally in Forms?

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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage