在下面的例子中:
我希望文本框填满所有可用空间。问题是下拉宽度无法固定,因为它的元素不是静态的。我想只用 css 解决这个问题(如果可能的话没有 javascript)。
我已经尝试过针对类似问题提出的解决方案,但没有任何运气:(
这是 fiddle :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 中测试正常)
- float 左右元素。
- 在 HTML 源代码中,将两个 float 元素都放在前面(这是最重要的部分)。
- 给中间元素
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>
关于css - 当同级具有可变宽度时,如何使元素填充剩余宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16241186/