Wie richtet man das Eingabeelement mit der Beschriftung auf derselben Linie aus?

Eingabeelement mit Beschriftung auf derselben Linie ausrichten

Im Webdesign ist es oft wünschenswert, eine Beschriftung und das entsprechende Eingabefeld darauf zu positionieren in derselben Zeile, wobei das Eingabefeld erweitert wird, um die verbleibende Breite seines Containers auszufüllen. Dies stellt jedoch eine Herausforderung dar, da CSS-Eigenschaften wie „width: 100 %;“ führt normalerweise dazu, dass die Eingabe in eine neue Zeile umgebrochen wird.

Um dieses Problem zu lösen, gibt es zwei Ansätze:

Ansatz 1: Overflow Hidden und Float

Bei diesem Ansatz wird die Beschriftung nach links verschoben und die Eingabe so eingestellt, dass sie einen Überlauf von „versteckt“ und eine Spanne aufweist, um sie zu umschließen. Der Bereich hat auf der linken Seite keinen Abstand und auf der rechten Seite 6 Pixel, um die Breite des Etiketts zu berücksichtigen.

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

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

Ansatz 2: Tabellenzelle anzeigen

Eine weitere Möglichkeit ist die Verwendung der Eigenschaft „display:table-cell“. Der Container ist auf „display: table“ eingestellt, wodurch ein tabellenähnliches Layout erstellt wird, während die Beschriftung und die Eingabe in Tabellenzellen platziert werden. Der Beschriftung wird eine Breite von 1 Pixel zugewiesen, um ein Umbrechen zu verhindern, und die Eingabe wird für den Abstand auf einen linken Abstand von 5 Pixel eingestellt.

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

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

Beide Methoden erreichen effektiv die gewünschte Ausrichtung mit Cross-Browser Kompatibilität. Entwickler können den Ansatz wählen, der ihren spezifischen Bedürfnissen und Projektanforderungen am besten entspricht.

Das obige ist der detaillierte Inhalt vonWie richtet man das Eingabeelement mit der Beschriftung auf derselben Linie aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!