使内联元素从另一个内联元素中填充100％的剩余空间

Question

我有表格，包含3个元素

<form>
    <input type="search" value="long text" />
    <select>
        <option>Google</option>
        <option>Bing</option>
    </select>
    <button>Search</button>
</form>

我希望选择和按钮拥有自己的宽度，输入来填充所有剩余空间。

我找到了不同的解决方案，但它们似乎无法正常工作。

关注how-to-make-element-fill-remaining-width-when-sibling-has-variable-width我得到了预期的效果（必须添加标记并更改元素的顺序）但是输入会被其他元素覆盖，从而失去了漂亮的圆形边框

button, select {
    float: right;
}

input {
    width: 100%;
}

.input_wrapper {
    overflow: hidden
}

我该怎么办呢？

• 我需要跨浏览器解决方案（＆gt; = IE7）
• 我会避免（如果可能的话）使用额外的标记
• 我想避免输入可以溢出和隐藏（如上所述）。

PS - 我通常会尝试避免浮动并继续使用 display-block 。但欢迎所有建议

Answer 1

好的，我认为可以通过将表单设置为＆＃34; display：table＆＃34;然后输入，选择和按钮显示：table-cell。

然后在前2个元素上设置宽度并使第三个元素宽度：100％并显示：block。

让我知道你是怎么过的。