根据textarea调整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;}