【踩坑】input的默认宽度，导致flex:1失效

最新推荐文章于 2021-10-11 11:18:01 发布

Mover_ye

最新推荐文章于 2021-10-11 11:18:01 发布

阅读量2.9k

点赞数 5

本文链接：https://blog.csdn.net/weixin_42618289/article/details/103873847

版权

先说说这个坑的来源

需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置

一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .formBox{
            display:flex;
        }
        .input{
            //width:0;//解决问题的关键就是这里
            flex:1;
            height:30px;
            padding:5px;
            outline:none;
            border: 1px solid #ddd;
            border-radius:6px;
        }
        .sumbitBtn{
            width:140px;
            height:42px;
            text-align:center;
            line-height:42px;
            border-radius:6px;
            margin-left:24px;
            background:#23AAF2;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="formBox">
        <input type="text" class="input">
        <div class="sumbitBtn">提交</div>
    </div>
</body>
</html>

样式中写了提交按钮的宽度为140px，

但是效果却是如下：

不对啊，我明明就写了width:140px了，怎么就变成99px了呢，

最后才查到input会有一个系统默认最小宽度，把按钮的宽度给挤到只剩下99px，

所以最终解决方案就是先给input随便加个宽度值覆盖系统默认的，再让flex:1生效即可，

我接下来的截图是给input的加上width:0的效果。

Mover_ye

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
【踩坑】input的默认宽度，导致flex:1失效

先说说这个坑的来源需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫