Positionieren des Etiketts bei Verwendung des beschrifteten Steuerelements

Question

Okay, versuchen Sie, ein ausfüllbares Formular zu erstellen, das über inline ausfüllbare Formulare verfügt (denken Sie an Mad Libs-Stil).

Für ein Element markierte Kontroll Verwendung und mit dem folgenden Code:

<form><p>Lorem ipsum <label class="label__fill-in"><input type="text" class="fill-in" maxlength="30">(community)</label> and stuff</p></form>

Ist es möglich, in der ohne Verwendung for="id-name" (bezogen auf den Beschriftungstext „(Gemeinschaft)“ unter der Eingangsleitung zu positionieren, MDN als "Labeled Control") nur mit CSS? Was wäre der Selektor nur für den echten Etikettentext und nicht für den darin enthaltenen Text?

Answer 1

Anstatt zu versuchen, den Text zu verschieben, machen Sie das Element des Eingabeblocks, was dazu führt, dass der Text darunter liegt.

Basierend auf Ihrer Struktur, stelle ich mir vor, dass Sie suchen, um den Text außerhalb des Etiketts in Übereinstimmung mit der Eingabe zu bekommen. Also, um dies zu tun, machen Sie das Label display: inline-block, so dass es die gewünschte Höhe bekommt. Dann können Sie den Text des nach oben ausrichten, so dass der gesamte Text nach oben zeigt.

https://jsfiddle.net/foyxhz4y/

Die CSS, die ich für diese verwendet wird:

label input { 
    display:block; 
} 
label { 
    display: inline-block; 
} 

p * { 
    vertical-align: top; 
} 

Zur Auswahl Inhalt des Etiketts, die nicht Eingänge sind, können Sie den :not Selektor verwenden. So können Sie den Text formatieren, den Sie verwenden können:

Dies wird alle Inhalte des Etiketts auswählen, die kein Eingabeelement sind