如何让文本区域宽度为 100% 并保持其边距？

给定以下 CSS

.comment {
    margin: 10px;
    display: block;
    overflow: auto;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    min-height: 200px;
    width: 100% 
}

这适用于textarea但右边距被忽略并且textarea离开屏幕。

为什么是这样？

通过将宽度设置为 100% 并将边距设置为 10px，文本区域将是其容器的 100% 宽度，向下并向左移动 10px

为了获得您想要的结果，您可能需要在文本区域周围使用一个具有 10 像素填充的容器。

See example http://jsfiddle.net/DY6L6/1/.

• commentA 使用带填充的容器
• commentB是你原来的CSS

所以像这样：

<div class="comment-container">
    <textarea class="commentA"></textarea>
</div>

and

.comment-container {
    padding:10px;
}
.commentA {
    width:100%;
    min-height: 200px;
}

开始。