如何拥有 100% 宽度的文本区域并保持其边距？答案

【问题标题】：How to have a textarea at 100% width and keep its margin?如何拥有 100% 宽度的文本区域并保持其边距？
【发布时间】：2011-06-11 02:19:45
【问题描述】：

给定以下 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 离开屏幕。

这是为什么？

【问题讨论】：

您能展示一下您的 HTML 的结构吗？
你想让 textarea 的宽度变得流畅吗？

标签： html css

【解决方案1】：

通过将宽度设置为 100% 和 10px 的边距，textarea 将是其容器的 100% 宽度，向下和向左移动 10px

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

见example。

commentA 正在使用带填充的容器
commentB 是您的原始 CSS

类似：

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

和

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

开始吧。

【讨论】：

我必须使用 'margin: 10px' 而不是 padding 才能工作。但将其放入容器中就是解决方案。

【解决方案2】：

只需使用：

display: inline

代替：

display: block

【讨论】：