Fix Breite Label mit Formular-Steuerelemente innerhalb

Question

sind Es gibt viele Möglichkeiten Fix-Breite Etiketten zu erreichen, wenn die entsprechende Form Kontrolle in einem anderen Knoten ist:

<label for="foo">Text</label> 
<input id="foo"> 

Allerdings habe ich ein vernünftiges finden zu kämpfen Art und Weise, es zu tun, wenn die Steuer Form innerhalb ist das Label:

<label>Text <input></label> 

Meine besten Versuche implizieren unter Formular-Steuerelemente aus Seitenfluss so mit Gegenständen brechen, die eine unterschiedliche Höhe aufweisen, zB:

label{ 
 
    display: block; 
 
    position: relative; 
 
    margin: 1em; 
 
    padding: 1em; 
 
    width: 9em; 
 
    background-color: azure; 
 
} 
 
input, textarea{ 
 
    position: absolute; 
 
    top: 1em; 
 
    left: 11em; 
 
    width: 15em; 
 
} 
 
textarea{ 
 
    height: 8em; 
 
}

<div> 
 
    <label>Short <textarea></textarea></label> 
 
</div> 
 
<div> 
 
    <label>This is a very long label text <input></label> 
 
</div> 
 
<div> 
 
    <label>Average sized <input></label> 
 
</div>

dieser HTML-Markup gegeben, gibt es eine andere relativ einfache CSS-only-Technik, die vertikal nach Bedarf erweitert, sowohl für Etiketten- und Kontrolle?

Answer 1

Hängt davon ab, wie Sie es eigentlich aussehen soll.

Die Verwendung von Flex kommt mir in den Sinn.

Hier ist ein einfacher Test:

label{ 
 
    display: flex; 
 
    position: relative; 
 
    margin: 1em; 
 
    padding: 1em; 
 
    width:23em; 
 
    background-color: azure; 
 
} 
 

 
input, textarea{ 
 
    font:inherit; 
 
    width: 15em; 
 
    margin-left:auto; 
 
    flex:none; 
 
    box-sizing:border-box; 
 
} 
 

 
textarea{ 
 
    height: 8em; 
 
}

<div> 
 
    <label>Short <textarea></textarea></label> 
 
</div> 
 

 
<div> 
 
    <label>This is a very long label text <input></label> 
 
</div> 
 

 
<div> 
 
    <label>Average sized <input></label> 
 
</div>

Answer 2

Sie display: table und display: table-cell verwenden können. seine ziemlich kompatibel mit allen Browsern auf der ganzen Linie

label{ 
 
    display: table; 
 
    position: relative; 
 
    margin-top: 20px ; 
 
    padding: 10px; 
 
    width: 300px; 
 
    background-color: azure; 
 
} 
 
label > span { 
 
    width: 100px; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
label > input, textarea{ 
 
    display: table-cell; 
 
    width: 100%; 
 
} 
 
textarea{ 
 
    height: 100px; 
 
}

<div> 
 
    <label><span>Short</span> <textarea></textarea></label> 
 
</div> 
 
<div> 
 
    <label><span>This is a very long label text</span> <input></label> 
 
</div> 
 
<div> 
 
    <label><span>Average sized </span><input></label> 
 
</div>