html – 使用字体awesome将工具栏与搜索文本框对齐

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

我希望这是理想的对齐方式,它在左边搜索,然后是右边的图标.

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

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

理想情况下,我希望像下面的图像一样对齐：

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

完整浏览器屏幕的菜单：

现在,当我最小化浏览器时,滚动到来是因为溢出：auto.

他们是一种可以控制图标搜索框宽度的方法,我认为更改fontsize可以解决问题.

解决方法

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

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

此外,正如注意到的那样,删除了该位置.