使div占据父级的剩余宽度[重复]

Posted 2023-03-06

【中文标题】使div占据父级的剩余宽度[重复]

【英文标题】：Make div occupy remaining width of parent [duplicate]

【发布时间】：2018-10-23 03:09:10

【问题描述】：

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

目前的 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 方法。

【参考方案1】：

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

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


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


div 
width: 100%;

也请查看flexbox guide，它对如何放置对象非常有用！

祝你好运！