选择框旁边有图标

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.您可以指定父容器使用显示为Flexbox display:flex;.此外,您还可以使用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的更多信息