将文本框的高度设置为标签文本的高度

时间:2013-04-17 16:41:30

标签: jquery html css

有人可以举例说明我如何设置文本框的高度以适应随附标签的高度吗?如您所见,我在字段集中有我的标签和文本框。我的标签的文本可以是变量的,所以我不确定是否有css属性来处理它,或者必须动态设置它。我还应该提一下,当页面加载时,我的标签会立即填充。我正在使用Asp.net。

http://postimg.org/image/am7xxwr1v/

<fieldset class="input">
<ol>
        <li>
            <asp:Label id="label1" AssociatedControlID="textField1" runat="server">Provide a brief description of the process used to build, monitor and maintain investment portfolios for this strategy.</asp:Label>
            <textarea ID="textField1" runat="server" cols="40" rows="4"></textarea>
        </li>
        <li>
            <asp:Label id="label2" AssociatedControlID="textField2" runat="server">What market anomaly or inefficiency are you trying to capture?</asp:Label>          
            <textarea ID="textField2" runat="server" cols="40" rows="4"></textarea>
        </li>
</ol>
</fieldset>
fieldset.input
{
float:none;
clear:both;
width:97%;
border:1px solid #C0CED7;
padding:0;
}

fieldset.input ol 
{
list-style:none;
padding: 1em 1em 0;
}

fieldset.input li 
{
float:left;
clear:left;
width:100%;
padding-bottom:1em;
}

fieldset.input label 
{
float:left;
width:15em;
margin-right:3em;
text-align:left;
}

1 个答案:

答案 0 :(得分:4)

你可以使用jQuery。

$(document).ready(function() {
   var labelHeight = $('label').height();
   $('textarea').height(labelHeight);
});

这是JSFiddle示例 - http://jsfiddle.net/XrcLy/1/