我有下面的CSS和HTML片段正在呈现。
文本区域 ｛ 边框:1px实体#999999; 宽度:100%; 保证金:5 px 0; 填充:3 px; ｝ <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">规则:</label> <textarea cols="2" rows="10" id="rules"> < / div >
问题是文本区域最终比父区域宽8px(边界为2px +填充为6px)。是否有一种方法继续使用边框和填充，但限制文本区域的总大小为父的宽度?
当前回答
我正在寻找一个内联样式的解决方案，而不是CSS解决方案，这是最好的我可以为一个响应式文本区域:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
其他回答
我正在寻找一个内联样式的解决方案，而不是CSS解决方案，这是最好的我可以为一个响应式文本区域:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
我经常用calc()来解决这个问题。你只需要给textarea一个100%的宽度和一定数量的填充，但你必须减去你给textarea的100%宽度的左右填充总数:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
或者如果你想给文本区域一个边框:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
如果你像这样填充和偏移:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
textarea的右侧与容器的右侧完美对齐，textarea内的文本与容器中的正文完美对齐……和左侧的textarea“突出”一点。它有时更漂亮。
那么负边际呢?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
我在这里遇到了另一个解决方案，它非常简单:在textarea的容器中添加padding-right。这保留了文本区域的边距、边框和填充，从而避免了Beck指出的chrome和safari在文本区域周围放置焦点高亮的问题。
容器的padding-right应该是文本区域两侧的有效边距、边框和填充之和，再加上容器可能需要的任何填充。对于原题中的情况
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class=“textareacontainer”> <textarea></textarea> </div>
