Wie richtet man Beschriftungen und Eingaben horizontal mit dynamischer Breite in CSS aus?

Beschriftung und Eingabe horizontal mit dynamischer Breite ausrichten

Beim Webdesign ist es oft notwendig, Beschriftungen und die entsprechenden Eingabeelemente darauf zu positionieren Linie. Allerdings kann es sich als Herausforderung erweisen, sicherzustellen, dass das Eingabeelement unabhängig vom Text des Etiketts die verbleibende Breite ausfüllt.

Um dies mithilfe von CSS zu erreichen, sollten Sie die folgenden Techniken in Betracht ziehen:

Technik zum Ausblenden von Überläufen

1. HTML: Verwenden Sie ein Label- und Span-Element, um die Eingabe zu umschließen:

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

2. CSS: Verwenden Sie die overflow:hidden-Eigenschaft für die Spanne:

<code class="css">label {
    float: left; /* Align label to the left */
}
span {
    display: block;
    overflow: hidden; /* Key trick for adjusting input width */
    padding: 0 4px 0 6px; /* Add padding for visual consistency */
}
input {
    width: 100%;
}</code>

Table-Cell Display Technique

1. HTML: Beschriftung und Eingabe in ein Container-Div einschließen:

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

2. CSS:Tabellenanzeige und Tabellenzelleneigenschaften nutzen:

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

Diese Techniken richten das Etikett und die Eingabe effektiv horizontal aus und stellen gleichzeitig sicher, dass das Eingabeelement die verbleibende Breite ausfüllt und sich an die Länge des Etikettentextes anpasst.

Das obige ist der detaillierte Inhalt vonWie richtet man Beschriftungen und Eingaben horizontal mit dynamischer Breite in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!