表单文本域和文本区域_全宽文本区域

最新推荐文章于 2024-08-01 21:00:07 发布

culuo8053

最新推荐文章于 2024-08-01 21:00:07 发布

阅读量954

点赞数

文章标签： css js html5 java python ViewUI

原文链接：https://davidwalsh.name/textarea-width

版权

表单文本域和文本区域

Working with textarea widths can be painful if you want the textarea to span 100% width. Why painful? Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least. Luckily there's a quick CSS solution to this problem!

如果您希望文本区域跨越100％的宽度，则使用文本区域宽度可能会很痛苦。为什么会痛？因为如果textarea的包含元素具有填充，则您的"width:100%" textarea可能会延伸到父容器之外-至少可以说这是令人沮丧的前景。幸运的是，有一个快速CSS解决方案可以解决这个问题！

View Demo 观看演示

CSS (The CSS)

box-sizing to the rescue!

box-sizing以进行救援！


textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;
}

View Demo 观看演示

Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means. If the box-sizing were content-box, the textarea would continue to stretch outside the parent container as it would have before.

将box-sizing设置为border-box可使textarea尊重其父容器的填充和边框，重新计算100%实际含义。如果box-sizing为content-box ，则文本区域将像以前一样继续延伸到父容器之外。