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

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

原创最新推荐文章于 2024-05-30 17:02:32 发布 · 830 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文解决了一个登录表单中输入框宽度控制不佳的问题。通过调整父元素div的宽度为max-content并删除高度设置，同时去掉子元素input的内边距，实现了图标与输入框的良好布局。

做登录表单时遇到了一个宽度控制不好的问题，放入图标后，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>