Question

我根据布局的其余部分搜索了一种调整textarea大小的方法，并偶然发现了盒子大小调整方法。我可能没有正确使用它，因为它对我不起作用。我有一个显示3个不同行的布局。中间行应显示文本输入字段，下面是所有最近的帖子。现在我希望textarea与我的其他帖子的宽度相同。

HTML

<div class="row">
  <div class="col-sm-2">
    <!-- Empty Space -->
  </div>
  <div class="col-sm-2">
    Some text here
  </div>
  <div class="col-sm-4">
    <textarea placeholder="Text here"></textarea>
    <div class="well"> Posts ...</div>
  </div>
  <div class="col-sm-2">
    Some text here
  </div>
  <div class="col-sm-2">
    <!-- Empty Space -->
  </div>
</div>

和css

textarea{
  box-sizing: border-box;
  border-radius: 5px;
  resize: none;
}

Answer 1

您可能正在寻找

textarea {
  width: 100%;
}

您的帖子会自动占用列中的所有空格，因为div是块级元素。查看我的Fiddle。

作为旁注，box-sizing属性只定义指定宽度/高度与计算宽度/高度之间的关系。

Answer 2

您可以将属性宽度添加到textarea css

像这样：

width:100px; // you can change it to whatever width you want

textarea{
    box-sizing: border-box;
    border-radius: 5px;
    resize: none;
    width:100px; /* set you own width */

}

<div class="row">
        <div class="col-sm-2">
            <!-- Empty Space -->
        </div>
        <div class="col-sm-2">
            Some text here
        </div>
        <div class="col-sm-4">

            <textarea placeholder="Text here"></textarea> 
           <div class="well"> Posts ...</div>



        </div>
         <div class="col-sm-2">
            Some text here
        </div>
        <div class="col-sm-2">
            <!-- Empty Space -->
        </div>
</div>

Answer 3

textarea {
  outline: none;
}

这应该删除发光女巫调整您的文本区域的大小。

box-sizing：border-box;不影响textarea

3 个答案: