如何使元素填充剩余宽度，当同级有可变宽度？ [英] How to make element fill remaining width, when sibling has variable width?

问题描述

在下面的示例中：

In the example below:

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

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 :(

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

以下是html：

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>

这里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;
}

推荐答案

更新演示  （在IE7 / 8/9/10，Firefox，Chrome和Safari中测试得很好）

Updated demo   (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)

• 浮动左右元素。 >
  
• 在HTML源代码中，先放置两个浮动元素（这是最重要的部分）。


• 给中间元素 overflow：hidden; 和一个隐含宽度 100％。


• 中间元素宽度 100％。

• Float the left and right elements.
• In the HTML source code, put both of the floated elements first (this is the most important part).
• Give the middle element overflow: hidden; and an implict width of 100%.
• Give the text box in the middle element a width of 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>

这篇关于如何使元素填充剩余宽度，当同级有可变宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！