如何alignment标签和textarea?

最终如

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; } 

你需要把它们都放在某个容器元素中,然后在其上应用alignment。

例如:

 .formfield * { vertical-align: middle; } 
 <p class="formfield"> <label for="textarea">Label for textarea</label> <textarea id="textarea" rows="5">Textarea</textarea> </p> 

只需用标签包装textarea,并将textarea样式设置为

 vertical-align: middle; 

这里是对页面上的所有textareas魔术:)

 <style> label textarea{ vertical-align: middle; } </style> <label>Blah blah blah Description: <textarea>dura bura</textarea></label> 
  1. 将标签的height为与多行文本框相同的height
  2. 为标签控件添加cssClass .alignTop{vertical-align: middle;}

     <p> <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label> <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox> <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red" ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field."> </asp:RequiredFieldValidator> 

在你的CSS vertical-align:middle使用vertical-align:middle

 <table> <tr> <td style="vertical-align:middle">Description:</td> <td><textarea></textarea></td> </tr> </table> 

尝试在你的td元素上设置一个高度。

 vertical-align: middle; 

表示样式应用于的元素将在父元素内alignment。 td的高度可能只和文本里面的高度一样高。

尝试这个:

 textarea { vertical-align: top; }​ 

将文本区域框与标签alignment,而不是文本区域的标签,

 label{ width:180px; display:inline-block; } textarea{ vertical-align:middle; } <label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>