html - 100% 拉伸(stretch)选择列表，与其他内容左对齐

Question

我希望“Hi”div 的宽度为 20 像素，并恰好 float 在选择列表的左侧。我希望选择列表占据剩余的宽度。

<div style="overflow:auto;width:100%;">
    <div style="float:left;width:20px;">
        Hi
    </div>
    <div style="float:left;">
        <select style="width:100%">
            <option value="United States">United States</option>
        </select>
    </div>
</div>

Answer 1

在第二个 div 和 select 标签中使用 width:calc(100% - 20px);。您还可以去掉第二个 div 中的 float:left。

示例:http://codepen.io/anon/pen/LpLjKx