divをテキストエリアに合わせてサイズ変更

Question

divを作成してこの入力エリアを作成しましたが、このdivがページ全体で実行されることは明らかです。私がスタイルを立てようとすると、凡例の下に境界線を追加すると、その境界線がページ全体に表示されます。私が望むのは、divの幅をtextareaボックスに制限することです。そのため、境界線もテキストエリアの先頭からテキストエリアの終わりまでしか渡らないようにします。

Answer 1

デフォルトでは、block要素は、親の利用可能な内部幅を占めるようになります。それが最大の子供のサイズに縮小するには、代わりにdisplay: inline-blockを使用してください。

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

をして、あなたのCSSをインラインブロックにあなたの入力エリアを変更：

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

あなたは独自の行にあなたがそれを望んでいたと仮定すると、その周りにラッパーを置くことができます。

#input_area {display: inline-block;}