使用字体awesome

Question

我正在尝试使用字体真棒制作工具栏，并在开始时使用一些图标和搜索文本框。

我希望这在理想情况下以最左边的搜索方式对齐，然后是右边的图标。

＆＃13;

＆＃13;

.icon-bar {
  width: 40%;
  text-align: center;
  background-color: #555;
  overflow: auto;
  display:flex;

}

.icon-bar a {
  width: 15%;
  padding: 12px 0;
  float: left;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.icon-bar a:hover {
  background-color: #000;
}

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

＆＃13;

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <div class="icon-bar">
    <input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a>
    <a class="active" href="#"><i class="fa fa-home"></i></a>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

理想情况下，我希望如下图所示对齐：

根据以下解决方案进行更改：

带有完整浏览器屏幕的菜单：

现在，当我最小化浏览器时，由于溢出而导致滚动：自动。

他们是否可以控制图标搜索框的宽度，我认为更改fontsize可以解决问题。

Answer 1

将显示flex添加到.icon-bar div。

.icon-bar {
  width: 30%;
  text-align: center;
  background-color: #555;
  overflow: auto;
display:flex;
}

另外，正如dipas所说，删除了该位置。

Answer 2

使用inline-block s更容易：

.icon-bar {
  text-align: center;
  background-color: #555;
  overflow: auto;
}
.icon-bar a {
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}
.icon-bar a:hover {
  background-color: #000;
}
#filtersubmit {
  color: #7B7B7B;
  cursor: pointer;
}
.icon-bar > * {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <div class="icon-bar">
    <input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a>
    <a class="active" href="#"><i class="fa fa-home"></i></a>

  </div>
</div>

您也可以使用flexbox es：

.icon-bar {
  text-align: center;
  background-color: #555;
  overflow: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 60%;
}
.icon-bar a {
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}
.icon-bar a:hover {
  background-color: #000;
}
#filtersubmit {
  color: #7B7B7B;
  cursor: pointer;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <div class="icon-bar">
    <input id="searchInput" type="text" placeholder="Search" /><i id="filtersubmit" class="fa fa-search"></i>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a>
    <a class="active" href="#"><i class="fa fa-home"></i></a>

  </div>
</div>

Answer 3

对子组display: table和.icon-bar

上的父display: table-cell和.search-bar使用.button-wrapper

.icon-bar {
  display: table;
  padding: 0 20px;
  background-color: #555;
  overflow: auto;
}

.search-bar, .button-wrapper {
  display: table-cell;
  vertical-align: middle;
}

#filtersubmit {
  color: #7B7B7B;
  cursor: pointer;
}

.button-wrapper a {
  display: inline-block;
  padding: 12px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.button-wrapper a:hover {
  background-color: #000;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <div class="icon-bar">
    <div class="search-bar">
      <input id="searchInput" type="text" placeholder="Search" />
      <i id="filtersubmit" class="fa fa-search"></i>
    </div>
    <div class="button-wrapper">
      <a href="#"><i class="fa fa-envelope"></i></a>
      <a href="#"><i class="fa fa-globe"></i></a>
      <a href="#"><i class="fa fa-trash"></i></a>
      <a class="active" href="#"><i class="fa fa-home"></i></a>
    </div>
  </div>
</div>