input、textarea宽设定100%时超出父容器
更新:2023-02-24 15:57:10
人气:394
来源:本站整理
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包裹,问题解决。
推荐的文章
随手记
- ● base64.js文件下载及使用方法说明
- ● windows利用bat微信双开、多开
- ● 百度API提交推送报{"error":401,"message":"tokenisnotvalid"}什么原因
- ● 如果在调用创建群接口时没有保存OpenConversationId,可以通过调用本接口通过chatId获取OpenConversationId
- ● Windows中使用BAT文件设置指定IP地址或自动获取IP
- ● php中如何对PHPSESSIDcookie设置httponly
- ● Navicat连接mysql出现1045错误,各种情况分析
- ● 用Apache的ab并发性能测试结果如何分析出最大并发数?
- ● Arrayandstringoffsetaccesssyntaxwithcurlybracesisnolongersupport
- ● Apache下如何关闭Track/trace请求设置及状态验证(window下)
PHP经验分享
- ● 如何开启PHP8的JIT提升运行速度
- ● 钉钉API接口-用PHP+Curl实现获取用户信息
- ● 钉钉API接口-用PHP+Curl实现获取应用Access_Token
- ● 在PHP中使用CURL,“撩”服务器只需几行——phpcurl详细解析和常见大坑
- ● MySQLInnodb并发涉及参数说明
- ● mysql参数调优之innodb_thread_concurrency、innodb_concurrency_tickets合理的使用cpu性能
- ● PHP用fsockopen检测指定IP端口是否开启可用
- ● PHP用socket检测服务器IP端口是否开放?代码示例
- ● GatewayWorker报错:Waring:Events::onMessageisnotcallable
- ● PHP监控指定IP端口接收到的数据的实现代码