使一个内联元素填充 100% 的剩余空间让另一个内联元素

Question

我有一个包含 3 个元素的 表单

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

我想让 select 和 button 有自己的宽度，并让 input 填充所有剩余空间。

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

在how-to-make-element-fill-remaining-width-when-sibling-has-variable-width 之后，我得到了想要的效果（必须添加标记并更改元素的顺序），但是 输入 被其他元素覆盖，失去了它漂亮的圆形边框。

button, select {
    float: right;
}

input {
    width: 100%;
}

.input_wrapper {
    overflow: hidden
}

我该怎么做？

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

PS - 我通常尽量避免 floats 并留在 display-block。但欢迎所有建议

Answer 1

好的，我认为这可以通过将表单设置为“显示：表格”，然后输入、选择和按钮来显示：表格单元格。

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

让我知道你过得怎么样。