当兄弟姐妹的宽度可变时，如何使元素填充剩余宽度？

Question

在下面的示例中：

我希望文本框填充所有可用空间。问题是下拉宽度无法修复，因为它的元素不是静态的。我想用css解决这个问题（如果可能的话，没有javascript）。

我已经尝试过针对类似问题提出的解决方案而没有任何运气:(

这是小提琴：http://jsfiddle.net/ruben_diaz/cAHb8/

这是html：

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">General</option>
                <option value="2">Fruits</option>
                <option value="3">Ice Creams</option>
                <option value="4">Candy</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>

这里是css：

#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-block;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}

Answer 1

Updated demo（在IE7 / 8/9 / 10，Firefox，Chrome，Safari中测试正常）

• 浮动左右元素。
• 在HTML源代码中，首先放置两个浮动元素（这是最重要的部分）。
• 提供中间元素overflow: hidden;，隐含宽度为100%。
• 为中间元素添加宽度为100%的文本框。

.category_dropdown_container {
    float: left;
}

input[type="submit"] {
    float: right;
    ...
}

.resizable_text_box {
    padding: 0 15px 0 10px;
    overflow: hidden;
}
.resizable_text_box input {
    width: 100%;
}

<div class="category_dropdown_container">
    <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
        ...
    </select>
</div>

<input name="commit" type="submit" value="Ask!" />

<div class="resizable_text_box">
    <input id="question_text_box" name="question[what]"
           placeholder="Write a query..." type="text" />
</div>

Answer 2

相对较新的＆＃39; flex＆＃39; display css property为您解决了这个问题：

您需要做的就是将表单b更改为display，提供inline-flex .resizable_text_box并提供flex-grow: 100; #question_text_box

OP的完整示例：

width: 100%

Flex-box让你可以用css做你想做的事情15年 - 终于来了！更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

将其中一些<span>元素更改为<div>个元素;然后float:left围绕你的下拉菜单划分;然后给出一个overflow:hidden右边的一个，其中的输入元素为width:100%;。

Here's an example。 Here it is again with a bigger drop down

---

除了拧紧提交按钮。因此，请提供#form_wrapper非静态定位（position:relative）并绝对定位提交按钮。请参阅this fiddle和this one。