Heim  >  Artikel  >  Web-Frontend  >  Wie richtet man Beschriftungen und Eingaben horizontal mit dynamischer Breite in CSS aus?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 22:40:03661Durchsuche

How to Align Labels and Inputs Horizontally with Dynamic Width in CSS?

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>
  1. 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>
  1. 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn