textarea-Komponente und die vertikale Ausrichtung in einer Tabelle
Haben wir eine Tabelle mit zwei Spalten: in jeder Zeile gibt es ein label auf der linken Seite und ein Eingabefeld auf der rechten Seite.
Wir verwenden vertical-align=text-bottom;
zu richten Sie die Unterseite der label-text, der am unteren Rand der text in die Eingabefelder ein.
So weit So gut.
Aber manchmal müssen wir eine textarea (mehrere Linien) anstelle der Eingabe-box. Die Unterseite des Etiketts auf der linken Seite ausgerichtet ist mit der Unterseite des letzten Zeile der textarea.
Gibt es eine Möglichkeit zum ausrichten der text auf der linken Seite mit der ersten Zeile der textarea?
Einem vereinfachten Beispiel
<table class="waiFormTable">
<tr>
<td><label>Label 1:</label></td>
<td><input id="id" type="text" name="name" value="value" /></td>
</tr>
<tr>
<td><label>Label 2:</label></td>
<td><textarea id="id" type="text" name="name" value="value" /></td>
</tr>
</table>
in der CSS definieren wir:
table.waiFormTable thead tr,
table.waiFormTable tbody tr {
vertical-align: text-bottom;
}
In diesem Beispiel möchte ich haben " - Label 1:" text-bottom ausgerichtet mit der ersten Zeile der textarea.
- Kann man ein jsfiddle und sind Sie offen für eine javascript-Lösung?
- Ein Kommentar auf der down-vote ist immer willkommen...
Du musst angemeldet sein, um einen Kommentar abzugeben.
In der Tat, wenn Sie haben eine textarea, die Sie ausrichten möchten, an die Spitze.
Einen besonderen Stil (Beispiel :
labelTextarea
) in diesem Fallmit:
input, textarea{ padding-bottom: 0; padding-top: 0;}
Versuchen, diese
hinzufügen einer Klasse zum
td
umschließt dietextarea
den gleichen
font
undpx
für dietable
,input
undtextarea
.legen Sie eine
vertical-align:top;
und einigepadding
auf dietd
umschließt dietextarea
Hinweis: möglicherweise müssen Sie zum einstellen von ein oder zwei pixel.
Beispiel: http://jsfiddle.net/jasongennaro/ccew8/
Schlage ich vor, anstelle von:
vertical-align=text-bottom;
den Sie verwenden könnten:
margin-top= 4px;
oder eine andere Menge der Pixel, sollte die Linie bis alle Etiketten mit der Unterseite der ersten Zeile.