如何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>
- 将标签的
height
为与多行文本框相同的height
。 -
为标签控件添加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>