代码之家 › 专栏 › 技术社区 › Adam

给选择框加上旁边的图标

css html

Adam · 技术社区 · 6 年前

<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 .

3 回复 | 直到 6 年前

dysfunc 6 年前

你可以用 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>

here

Paulie_D 6 年前

挠性箱

.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-Aweome/4.7.0/css/font-Aweome.css”rel=“样式表”/>
<div class=“container”>
<select name=“select”>
<选项>女孩</选项>
<选项>男孩</选项>
</选择>
<i class=“fa fa star”></i>

Eric.D 6 年前

使用flex布局可以解决您的问题,请检查以下代码:

<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