將文本框的高度設置爲標籤文本的高度

有人能給我提供一個示例，說明如何設置我的文本框的高度以適應伴隨它的標籤的高度？正如你所看到的，我在一個字段集中有我的標籤和文本框。我的標籤文本可以是可變的，所以我不確定是否有CSS屬性來處理這個問題，或者它必須被動態設置。我還應該提到，當頁面加載時，我的標籤即將填充。我正在使用Asp.net。將文本框的高度設置爲標籤文本的高度

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

來源

2013-04-17 mseg

你能後的HTML呢？ – Wex

你是怎麼發佈html的？我一直在嘗試，但它不斷地解釋它，而不是發佈原始代碼。 – mseg

粘貼HTML，全選，然後點擊上面的「{}」按鈕。 :) – Kaloyan

你可以使用jQuery做。

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

這裏是的jsfiddle例子 - http://jsfiddle.net/XrcLy/1/

來源

2013-04-17 16:52:54

'+ 1'因爲它實際上工作，但是這裏包含一些css以使它更加清晰 - http://jsfiddle.net/XrcLy/2/ – Kaloyan

上面的代碼不適合我。我發佈了我的html，但我也應該提到我的標籤是動態填充的。要發佈上面的html，我必須複製並粘貼結果。難道這就是爲什麼它不像你的例子那樣調整大小？ – mseg

@mseg如果jQuery實際上是一個選項，您應該相應地標記您的問題以確保更多人看到您的問題。 – excentris

將文本框的高度設置爲標籤文本的高度

回答

相關問題