Wie werden Optionsfelder und Beschriftungen in derselben Zeile angezeigt?

Gleiche Anzeige von Optionsfeldern und Beschriftungen

Beim Erstellen eines Formulars kann es wünschenswert sein, Optionsfelder und die entsprechenden Beschriftungen zu haben in derselben Zeile angezeigt. Standardmäßig werden Optionsfelder jedoch unterhalb ihrer Beschriftungen angezeigt.

Beim Versuch, Optionsfelder und Beschriftungen auszurichten, ist das folgende Problem aufgetreten:

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

In diesem Fall werden die Optionsfelder darunter angezeigt die Etiketten. Um dieses Problem zu beheben, wurde die folgende Lösung implementiert:

Beide Beschriftungen und Eingabeelemente nach links verschieben und Abstand und Rand anpassen, bis die Ausrichtung erreicht ist.

Für optimale Kompatibilität fügen Sie außerdem eine Klasse hinzu Benennen Sie die Optionsfelder für ältere Versionen von Internet Explorer.

Für ein Formular mit mehreren Optionsfeldern in derselben Zeile lautet das empfohlene Markup:

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

Mit dem folgenden CSS:

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

label {
    float: left;
    display: block;
    padding: 0 1em 0 8px;
}

input[type=radio] {
    float: left;
    margin: 2px 0 0 2px;
}

Durch die Implementierung dieser Techniken ist es möglich, Optionsfelder und Beschriftungen in derselben Zeile anzuzeigen.

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