asp.net 如何对齐标签和文本区域?

bvn4nwqk  于 2023-02-10  发布在  .NET
关注(0)|答案(7)|浏览(323)

我的代码最后是这样的:

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

fafcakar1#

您需要将它们都放在某个容器元素中,然后通过容器元素应用对齐。
例如:

.formfield {
  display: flex;
  align-items: center;
}
<div class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</div>
uqjltbpv

uqjltbpv2#

只需用标签 Package 文本区域,并将文本区域样式设置为

vertical-align: middle;

下面是页面上所有文本区域的一些魔法:)

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

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

inkz8wg93#

1.将标签的height设置为与多行文本框相同的height
1.为标签控件添加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>
gcuhipw9

gcuhipw94#

将文本区域框与标签对齐,而不是将标签与文本区域对齐,

label {
    width: 180px;
    display: inline-block;
}

textarea{
    vertical-align: middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>
q43xntqr

q43xntqr5#

在CSS中使用vertical-align:middle

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

x8goxv8g6#

试试这个:

textarea { vertical-align: top; }​
lhcgjxsq

lhcgjxsq7#

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

vertical-align: middle;

表示应用样式的元素将在父元素内对齐。td的高度只能与其中的文本一样高。

相关问题