根據文本區域調整div的大小

Question

我創建了一個div來創建這個輸入區域，但是很明顯這個div會在整個頁面上運行。每當我嘗試設計風格時，比如說在圖例下添加一個邊框，邊框將貫穿整個頁面。我想要的是將div的寬度限制在textarea框中，以便即使邊框只從textarea的開始處到textarea的結尾處運行。

Answer 1

默認情況下，block元素將增長以佔據其父級的可用內部寬度。要將其縮小到最大的孩子的大小，請改爲使用display: inline-block。

div { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
}

<div id="input_area"> 
 
    <fieldset> 
 
     <legend>Input Text</legend> 
 
     <textarea rows="10" cols="80"></textarea> 
 
    </fieldset> 
 
</div>

Answer 2

你可以把它周圍的包裝假設你希望它在自己的行：

<div> 
    <div id="input_area"> 
    <fieldset> 
     <legend>Input Text</legend> 
     <textarea rows="10" cols="80"></textarea> 
    </fieldset> 
    </div> 
</div> 

，然後用你的CSS您的輸入區域變更爲內聯塊。

#input_area {display: inline-block;}