Html 让选择框充满旁边的图标

我在容器中有一个选择框和一个图标，如下所示：

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

姑娘
男孩

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

我正在考虑测量图标的像素宽度，并将其设置为选择框的右边距。但这似乎不适用于

宽度：100%

，我也不确定图标的像素宽度是否在所有设备上都相同

如何在带有图标的一行上尽可能宽地显示选择框

这是一个。

你可以用来做这个。您可以使用

display:flex。此外，您还可以使用css属性
flex
，它是
flex-grow
、
flex-shorn
和
flex-basis
的缩写。将该值设置为
1
，告诉元素使用所有“空”水平间距

.container {
  display: flex;
}

select{
  flex: 1;
}

i{
  font-size: 1em;
}


.container{
显示器：flex；
}
挑选{
弹性：1；
}
我{
字号：1em；
}

姑娘
男孩
Flexbox


.container{
边框：1px实心；
显示器：flex；
}
挑选{
弹性：1；/*尽可能宽*/
}
我{
字号：1em；
}

姑娘
男孩
使用flex布局可以解决您的问题，请检查以下代码：



.集装箱{
边框：1px实心；
显示器：flex；
弯曲方向：行；
}
挑选{
宽度：100%；
}
我{
字号：1em；
}
姑娘
男孩
偶像
什么是
选择{flex:1；}
在做什么？