在下面的例子中：
我想要文本框填充所有可用空间.问题是下拉宽度不能固定,因为它的元素不是静态的.我想解决这个只是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;
}
解决方法
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>
