Question

我一直无法设置textarea元素的宽度并通过CSS使用填充。填充值似乎改变了textarea的宽度，我宁愿不这样做。

这是我的HTML代码：

<div id="body">
    <textarea id="editor"></textarea>
</div>

我的CSS代码：

#body {
    height:100%;
    width:100%;
    display:block;
}

#editor {
    height:100%;
    width:100%;
    display:block;
    padding-left:350px;
    padding-right:350px;
}

但是，填充值似乎不像人们期望的那样工作。 textarea的宽度在两个方向上增加了350px，而不是在元素的边界和内容之间定义空间。

我考虑通过将边距设置为“0px auto”来对textarea进行居中，但如果鼠标悬停在其中一个空边距上，我希望用户仍然能够滚动文本区域。出于同样的原因，我无法添加另一个div来充当包装器，因为用户无法沿着空白区域滚动，而只能沿着无边距的textarea滚动。

有人可以帮忙吗？

Answer 1

CSS box model将“width”定义为内容的宽度，不包括边框，填充和边距。

幸运的是，CSS3有一个新的box-sizing属性，允许您使用以下命令修改此行为，而不是在指定的宽度中包含填充等：

box-sizing: border-box;

根据上面的链接，大多数现代浏览器（包括IE＆gt; = 8）都支持此属性，但它们在每个浏览器中都有不同的名称。

Answer 2

在'％'中指定宽度和边距/填充有帮助。这是一个例子 -

直播@ http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body {
  background-color:#ccc;
  height:100%;
  width:100%;
  display:block;
}

textarea#editor {
  border:none;
  width:80%;
  height:100%;
  margin-left:10%;
  margin-right:10%;
}

Answer 3

CSS指定的宽度不包括填充或边框（符合W3C规范）。我想一种方法是使用一些JavaScript将#editor的宽度设置为#body减去700px的宽度，但这有点混乱......不确定是否有一种CSS方式在这里做你想做的事情。当然，你可以使用margin然后将onMouseWheel事件注册到#body并使用它......

Answer 4

某些浏览器允许您定位占位符以更改颜色等，因此您也可以添加填充：

::-webkit-input-placeholder { /* WebKit browsers */
    padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    padding: 5px 0 0 5px;
}

Answer 5

只需添加一个简单的边框：

border-bottom: 1em solid white;

随意使用所需的颜色和尺寸。您还可以使用 border-top、border-left、border-right 或仅使用 border。要使其像填充一样，只需确保添加与 背景色

相同的颜色

.parent, textarea{
  width:100%;
}

.parent{
  display:flex;
}

textarea{
  border:1em solid black;
}

<div class='parent'>
  <textarea rows="5"></textarea>
</div>

如何在不增加宽度的情况下向textarea添加填充？

5 个答案: