如何使用100%宽度的textarea并保持其边际？

Question

给出以下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% 
}

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

为什么是这样？

Answer 1

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

为了得到您想要的结果,您可能需要在textarea周围使用10px填充物的容器.

见例子.

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

像这样的东西:

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

和

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

开始.