css - How to make element fill remaining width, when sibling has variable width?

Question

In the example below:

I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).

I have tried the solutions proposed to similar questions without any luck :(

Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/

Here is the 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>

And here the 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

更新的演示   （在 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

相对较新的“flex”显示 css 属性为您解决了这个问题：

您需要做的就是将表格更改display为inline-flex, give.resizable_text_box flex-grow: 100;和 give#question_text_box width: 100%

OP的完整示例：

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

<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">Options</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>

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

Answer 3

将其中一些<span>元素更改为<div>元素；然后float:left是下拉列表周围的划分；然后给出右边的一个 anoverflow:hidden和它里面的输入元素 a width:100%;。

这是一个例子。这里又是一个更大的下拉菜单。

---

除了搞砸提交按钮。所以给定#form_wrapper非静态定位（position:relative）并绝对定位提交按钮。看到这个小提琴和这个。