【HTML-CSS】div中加入icon后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>

【HTML-CSS】div中加入icon后input标签占用不满问题的相关教程结束。