Heim > Artikel > Web-Frontend > 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
<code class="html"><label for="test">Label</label> <span><input name="test" id="test" type="text" /></span></code>
<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
<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; /* 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!