带两个自动宽度元素的自举输入组和一个输入填充剩余宽度

Question

我需要制作带有图标（固定宽度）的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/

它不起作用，因为输入下，选择显示。 我尝试了不同的方法：使用宽度，浮点数，表格单元格，空格，但没有给出我需要的确切结果。对不起，如果有同样的问题，我找不到它。

任何想法配合？

Answer 1

试试这个：

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

乐趣