我有以下CSS和HTML片段正在呈现 .
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"/>
</div>
问题是文本区域最终比父级宽8px(填充边界6px为2px) . 有没有办法继续使用边框和填充但是将 textarea
的总大小限制为父级的宽度?
15 回答
使用box sizing property:
那会有所帮助
对于使用Bootstrap的人来说,textarea.form-control也可能导致textarea大小调整问题 . Chrome和Firefox似乎使用以下Bootstrap CSS使用不同的高度:
负利润怎么样?
我经常解决这个问题与
calc()
. 您只需给textarea一个100%的宽度和一定量的填充,但是你必须减去你给textarea的100%宽度的总左右填充:或者如果你想给textarea一个边框:
为什么不?忘记黑客,只是用CSS做?
我经常使用一个:
请参阅浏览器支持here .
许多CSS格式问题的答案似乎是“添加另一个<div>!”
那么,在这种精神中,您是否尝试过添加一个包装边框/填充的包装div,然后将100%宽度的textarea放入其中?像(未经测试)的东西:
让我们考虑向用户呈现我们想要实现的最终输出:带有边框和填充的填充文本区域,这些特征是被点击它们将焦点传递给我们的textarea,以及自动100%宽度的优势典型的块元素 .
我认为最好的方法是尽可能使用低级解决方案,以达到最大的浏览器支持 . 在这种情况下,唯一的HTML可以正常工作,避免使用Javascript(无论如何我们都喜欢) .
LABEL标记在我们的帮助中,因为有这样的行为,并允许包含它必须解决的输入元素 . 它的默认样式是内联元素之一,因此,为标签提供块显示样式,我们可以利用自动100%宽度(包括填充和边框),而内部文本区域没有边框,没有填充和100%宽度 .
看一下W3C的细节我们可能会注意到的其他优点是:
需要
no "for"属性:当LABEL标记包含目标输入时,它会在单击时自动聚焦子输入;
如果已经设计了textarea的外部标签,则不会发生冲突,因为给定的输入可能有一个或多个标签 .
有关更多详细信息,请参见W3C specifics .
简单的例子:
.textareaContainer元素的填充和边框是我们想要给textarea的元素 . 尝试编辑它们以根据需要设置样式 . 我为.textareaContainer元素提供了大而可见的填充和边框,让您在单击时看到它们的行为 .
如果你对填充的宽度不太感兴趣,这个解决方案实际上也会保持填充百分比 .
不完美,但你会得到一些填充,宽度加起来100%所以这一切都很好
我遇到了另一个解决方案here,这很简单:在textarea的容器中添加padding-right . 这样可以保留textarea上的边距,边框和填充,从而避免了Beck指出的关于chrome和safari放在textarea周围的焦点突出显示的问题 .
容器的填充权应该是textarea两侧的有效边距,边框和填充的总和,以及您可能需要的容器填充 . 因此,对于原始问题中的情况:
这段代码适用于IE8和Firefox
您可以使用box-sizing属性,它受所有主要符合标准的浏览器和IE8的支持 . 但是,您仍然需要针对IE7的解决方法 . 阅读更多here .
不,你不能用CSS做到这一点 . 这就是微软最初推出另一款产品的原因,也许更实用box model . 最终获胜的盒子模型使得混合百分比和单位变得非常实用 .
我不认为用父母的百分比来表达填充和边框宽度也不行 .
如果你填充并偏移它像这样:
textarea的右侧与容器的右侧完美对齐,textarea内的文本与容器中的正文文本完全对齐...而textarea的左侧'sticks out'有点 . 它有时更漂亮 .
我一直在寻找内联样式解决方案而不是CSS解决方案,这是我能用于响应式文本区域的最佳方法: