【HTML-CSS】div中加入icon后input标签占用不满问题

最新推荐文章于 2024-05-30 17:02:32 发布

一朵小菜花

最新推荐文章于 2024-05-30 17:02:32 发布

阅读量631

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_34850830/article/details/127307745

版权

做登录表单时遇到了一个宽度控制不好的问题，放入图标后，input框总是无法正确的填满剩余空间（尺寸过大/过小）
原因是input元素和父元素div宽度都写死的问题
子元素无法正确的占满父元素空间
把父元素的高度删除，宽度改成max-content
删除子元素的padding
父元素的空间由子元素input撑起，即可正确的撑满空间
在这里插入图片描述
将图标宽度固定大功告成

以下是表单部分代码，图标部分使用Awesome

form>div{
            width: max-content;
            margin: 10px auto;
            border: 1px solid #ccc;
            line-height: 30px;
        }
        form>div>i{
            width: 16px;
            margin-left: 5px;
            margin-right: 5px;
        }
        form>div>input{
            padding: 0;
            height: 30px;
            width: 230px;
            vertical-align: top;
            border: none;
            background-color: #bfc;
        }

<i class="fab fa-twitter fa-4x brid"></i>
        <div id="title">Twitter</div>
        <div id="sectitle">Fake Message Commuity</div>
        <form action="">
            <div><i class="fas fa-mail-bulk"></i><input type="address" name="" placeholder=邮箱 id="" ></div>
            <div><i class="fas fa-lock"></i><input  type="password" name="" placeholder=邮箱 id="" ></div>
        </form>