制作一个内联元素，以填充从另一个内联图元中留出的剩余空间的100%

Question

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

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

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

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

根据如何在同级具有可变宽度时使元素填充剩余宽度，我得到了所需的效果（必须添加标记并更改元素的顺序），但输入被其他元素覆盖，失去了漂亮的圆角边界。

button, select {
    float: right;
}
input {
    width: 100%;
}
.input_wrapper {
    overflow: hidden
}

我该怎么办？

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

PS-我通常会尽量避免浮动，并使用显示块。但是所有的建议都是受欢迎的

Answer 1

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

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

让我知道你进展如何。