HTML – 如何使100％宽度的textarea保持其边际？

发布时间：2020-12-14 19:43:30 所属栏目：资源来源：网络整理

导读：给出以下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,.2)

给出以下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,.2) 1px 1px 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    min-height: 200px;
    width: 100% 
}

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

为什么是这样？

解决方法

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

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

见example.

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

像这样的东西：

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

和

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

开始.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!