带两个自动宽度元素的自举输入组和一个输入填充剩余宽度
问题描述:
我需要制作带有图标(固定宽度)的1行input-group
,然后select
(自动宽度,取决于选项),然后是文本input
填充剩余宽度。带两个自动宽度元素的自举输入组和一个输入填充剩余宽度
以下是骨架:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<select class="form-control">
<option>Something</option>
<option>Another</option>
</select>
<input type="text" class="form-control" placeholder="Username">
</div>
下面是摘录:http://jsfiddle.net/qPdcs/722/
它不起作用,因为输入下,选择显示。 我尝试了不同的方法:使用宽度,浮点数,表格单元格,空格,但没有给出我需要的确切结果。对不起,如果有同样的问题,我找不到它。
任何想法配合?
答
试试这个:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<select class="form-control" style="width: 40%;">
<option>Something</option>
<option>Another</option>
</select>
<input type="text" class="form-control" placeholder="Username">
</div>
<style>
.input-group {
display: flex;
}
.input-group-addon {
width: 50px;
}
</style>
乐趣
对不起队友,这不是我所需要的。 'select'必须有'width:auto;'。用百分比宽度,一切都变得非常简单 – Stalinko