html - 给出带有旁边图标的选择框

Question

我在这样的容器中有一个选择框和一个图标:

<div class="container">
  <select name="select" style="width:100%">
  <option>Girl</option>
  <option>Boy</option>
  </select>
  <i class="fa fa-star"></i>
</div>

我希望选择框具有容器的整个宽度减去图标的长度，以便它们彼此相邻。

我正在考虑测量图标的像素宽度并将其设置为选择框的 margin-right。但这似乎不适用于 width:100%，而且我也不确定图标的像素宽度是否在所有设备上都相同。

如何让选择框尽量宽，同时与图标在一行？

这是一个jFiddle .

Answer 1

你可以使用 flexbox为了这。您可以使用 display:flex; 分配父容器以显示为 flexbox .此外，您可以使用 css 属性 flex , 这是 flex-grow 的简写, flex-shrink和 flex-basis合并。将其设置为 1 的值, 告诉元素消耗所有“空”水平间距。

.container {
  display: flex;
}

select{
  flex: 1;
}

i{
  font-size: 1em;
}

.container {
  display: flex;
}

select{
  flex: 1;
}

i{
  font-size: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="container">
  <select name="select">
    <option>Girl</option>
    <option>Boy</option>
  </select>
  <i class="fa fa-star"></i>
</div>

您可以在 flexbox 上找到更多信息 here