如何获得100％宽度的textarea并保持其边距？ [英] How to have a textarea at 100% width and keep its margin?

问题描述

给定以下CSS

  .comment {
 margin：10px; 
 display：block; 
溢出：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的边距，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; 
} 
  

开始使用。

Given the following 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% 
}

This is applied to a textarea but the right margin is ignored and the textarea goes off the screen.

why is this?

解决方案

By setting the width to 100% and a margin of 10px the textarea will be a 100% width of it's container shifted down and to the left 10px

To get your desired result you'll probably need to use a container around the textarea with a 10px padding.

See example.

• commentA is using a container with padding
• commentB is your original CSS

so something like:

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

and

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

to get started.

这篇关于如何获得100％宽度的textarea并保持其边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！