Wie richte ich Eingabeelemente und Beschriftungen in HTML auf derselben Linie aus?

Eingabeelemente mit Beschriftungen auf derselben Linie ausrichten

In HTML ist es oft wünschenswert, eine Beschriftung und ein Eingabeelement auf derselben horizontalen Linie zu platzieren. Es kann jedoch eine Herausforderung sein, die ideale Breite für das Eingabeelement zu bestimmen, um den verbleibenden Platz auszufüllen.

Problem:

Der Standardansatz mit width: auto; führt zu Ergebnissen in einer statischen Breite für das Eingabeelement. Alternativ Breite: 100 %; verschiebt die Eingabe in eine neue Zeile.

Lösung:

Um die gewünschte Ausrichtung zu erreichen, berücksichtigen Sie die folgenden CSS-Techniken:

Option 1: Floating Beschriften und Überlauf

HTML:

<code class="html"><label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span></code>

CSS:

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

Diese Methode nutzt die overflow:hidden-Eigenschaft, um Richten Sie das Eingabeelement an der Beschriftung aus, indem Sie Zeilenumbrüche verhindern.

Option 2: Tabelle Anzeige

HTML:

<code class="html"><div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div></code>

CSS:

<code class="css">.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}</code>

Dieser Ansatz nutzt die display:table-Eigenschaft, um Erstellen Sie ein tabellenartiges Layout, bei dem die Beschriftung eine feste Breite hat und das Eingabeelement erweitert wird, um den verbleibenden Platz auszufüllen.

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