当CSS中存在填充时，如何使TextArea的宽度为100％而不会溢出？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在渲染以下CSS和HTML代码段。

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

问题是文本区域最终比父区域宽8像素（边框2像素+填充6像素）。有没有办法继续使用边框和填充，但是将的总大小限制textarea为父级的宽度？

回答：

为什么不忘了这些技巧，而只使用CSS？

我经常使用的一种：

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

以上是 当CSS中存在填充时，如何使TextArea的宽度为100％而不会溢出？ 的全部内容， 来源链接： utcz.com/qa/420282.html

回到顶部