html - 制作一个内联元素以填充 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我得到了预期的效果(必须添加标记并更改元素的顺序)但是 input 被其他元素覆盖，失去了漂亮的圆形边框。

button, select {
    float: right;
}

input {
    width: 100%;
}

.input_wrapper {
    overflow: hidden
}

我该怎么做呢？

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

PS - 我通常会尽量避免 float 并使用display-block。但欢迎所有的建议

Answer 1

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

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

让我知道你的进展情况。