让div占据父级的剩余宽度

Question

在我正在制作的网页上，我想添加一个搜索栏。我有一个用于整个搜索栏的 div 容器，里面有一个文本输入和一个按钮。我想要实现的是，文本输入填充除搜索按钮之外的整个父 div。

目前 HTML 是这样的：

<div style="margin: 8px; margin-bottom: 32px; padding: 1px; background-color: #888; ">
    <input type="text" name="search" placeholder="Search..." style="padding: 14px; font-size: 16px;">
    <button type="submit" style="float: right; padding: 16px;">
        <i class='fa fa-search'></i>
    </button>
</div>

我尝试在宽度中输入“100%”，但这不起作用。我可以使用 JS，但我确信有一种简单、简单的 html 方法可以实现这一点。

Answer 1

首先，尽量避免浮动，它很混乱。为了实现“一行上的两个项目”技巧，您需要知道设置按钮的宽度，并告诉输入使用 calc() CSS 属性占用剩余空间。

input {
display: inline-block;
width: calc(100% - 100px);
}

button {
width: 100px;
margin: 0;
display: inline-block
}

div {
width: 100%;
}

另请查看这个Flexbox 指南，它对于如何放置对象提供了非常丰富的信息！

祝你好运！