Wie richtet man Beschriftungen neben Eingaben in einem Formular richtig aus?

Beschriftungen neben Eingaben in einem Formular korrekt ausrichten

Ein häufiges Szenario beim Formulardesign ist die korrekte Ausrichtung von Beschriftungen neben ihren Eingabefeldern. Um diese Ausrichtung zu erreichen, ziehen Sie den folgenden Ansatz in Betracht:

Bestimmen Sie eine geeignete feste Breite für Etikettenelemente und weisen Sie diese mithilfe der Eigenschaft „Breite“ zu. Setzen Sie die Anzeigeeigenschaft für Beschriftungen auf „inline-block“. Richten Sie den Text innerhalb der Beschriftungen mit text-align: right nach rechts aus.

Hier ist ein Beispiel-Codeausschnitt:

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text">
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text">
</div>
<div class="block">
  <label>Short</label>
  <input type="text">
</div></code>

Dieser Ansatz verwendet feste Breiten, was möglicherweise nicht ideal ist für responsive Designs. Erwägen Sie die Verwendung von Flexbox oder CSS Grid für eine reaktionsfähigere Lösung.

Das obige ist der detaillierte Inhalt vonWie richtet man Beschriftungen neben Eingaben in einem Formular richtig aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!