如何对齐标签和文本区域？ [英] How do I align a label and a textarea?

问题描述

结束于

  XXXXX 
 XXXXX 
说明：XXXXX 
  

我想要

  XXXXX 
说明：XXXXX 
 XXXXX 
  

说明有时会跨多行。 p>

代码：

 < p class =DataForm> 
 
< label> Blah blah blah说明：< / label> 
 
< asp：TextBox ID =txtBlahblahblahDescriptionrunat =serverTextMode =MultiLineRows =8Columns =50>< / asp：TextBox>< br /> 
 
< / p> 
  

CSS：

 code> .DataForm 
 {
 
} 
 
 .DataForm标签
 {
 display：inline-block; 
 font-size：small; 
 margin-left：5px; 
 width：5％; 
 min-width：60px; 
} 
 
 .DataForm输入
 {
 margin-right：9px; 
 display：inline-block; 
 width：21％ 
 min-width：30px; 
} 
  

解决方案

例如：

.formfield * {vertical-align：middle;}

 < p class =formfield> < label for =textarea> textarea的标签< / label> < textarea id =textarearows =5> Textarea< / textarea>< / p>  

ends up like

             XXXXX
             XXXXX
Description: XXXXX

I want

             XXXXX
Description: XXXXX
             XXXXX

"Description" sometimes spans multiple lines.

Code:

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

解决方案

You need to put them both in some container element and then apply the alignment on it.

For example:

.formfield * {
  vertical-align: middle;
}

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

这篇关于如何对齐标签和文本区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！