input、textarea宽设定100%时超出父容器
更新:2023-02-24 15:57:10
人气:41
来源:本站整理
A+
在设置input的宽度为100%时,有时候会造成浏览器出现横向滚动条,超出了页面的宽度,如何解决这个问题呢?
<form style="width: 333px;border: 1px red solid;">
<input type="text" placeholder="input>text" style="width:100%;"><br>
<textarea placeholder="textarea" style="width:100%;"></textarea><br>
</form>
父级容器form宽度给了固定值,子标签input、textarea宽度都设为100%。
页面效果:
可以发现input、textarea均超出了父级容器form。这样的效果显然是不合理的,如何解决呢?
方法很简单,只需在css中加入:
input,textarea {
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Firefox */
-moz-box-sizing: border-box; /* Safari */
}
页面效果:
父级容器成功将内部input、textarea包裹,问题解决。
推荐的文章
随手记
PHP经验分享
- ● mysql错误:Foundoptionwithoutprecedinggroupinconfigfile
- ● PHP如何从一个数组数据列表中随机取其中的数值?
- ● PHP获取用户访问IP地址的5种方法
- ● PHP用imagerotate旋转图片和等比缩放压缩、添加水印
- ● php怎么把时间转成数字
- ● 利用PHPflush函数在运行过程中直接打印输出结果
- ● php与JavaScript的正则表达式使用方法是否一样?
- ● PHP中preg_match()和preg_match_all()正则表达式的用法区别
- ● PHP批量向百度主动推送URL加快收录的示例代码
- ● 使用PHP中3个神奇常量快速获取目录、文件名和行号