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

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上找到其他信息

Answer 2

Flexbox

.container {
  border: 1px solid;
  display: flex;
}

select {
  flex: 1; /* be as wide as possible */
}

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>

CSS网格

.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 1fr auto;
  /* first column will be as wide as possible */
}

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>

Answer 3

使用弹性布局可以解决您的问题，请检查以下代码：

<style>
  .container {
      border:1px solid;
      display:flex;
      flex-direction:row;
  }
  select{
    width: 100%;  
  }
  i{
    font-size: 1em;
  }
</style>
<div class="container">
  <select name="select">
  <option>Girl</option>
  <option>Boy</option>
  </select>
  <i class="fa fa-star">icon</i>
</div>

还有更多要求，请检查以下链接： https://www.w3schools.com/css/css3_flexbox.asp