如何对齐标签和文本区域？

Question

结束了

             XXXXX
             XXXXX
Description: XXXXX

我想要

             XXXXX
Description: XXXXX
             XXXXX

"描述"有时跨越多行.

码:

<p class="DataForm">
    <label>Blah blah blah Description:</label>
    <asp:TextBox ID="txtBlahblahblahDescription"
                 runat="server"
                 TextMode="MultiLine"
                 Rows="8"
                 Columns="50"></asp:TextBox><br/>
</p>

CSS:

.DataForm {
}
.DataForm label {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    width: 5%;
    min-width: 60px;
}
.DataForm input {
    margin-right: 9px;
    display: inline-block;
    width: 21%;
    min-width: 30px;
}

Answer 1

您需要将它们放在某个容器元素中,然后在其上应用对齐.

例如:

.formfield * {
  vertical-align: middle;
}

<p class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</p>

Answer 2

只需使用标签包裹textarea并将textarea样式设置为

vertical-align: middle;

这是页面上所有textareas的魔力:)

<style>
    label textarea{
        vertical-align: middle;
    }
</style>

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>