使用 font awesome 将工具栏与搜索文本框对齐

Question

我正在尝试使用很棒的字体制作一个工具栏，开头有几个图标和搜索文本框。

我希望它以一种理想的方式对齐，即搜索在最左侧，然后是图标在其右侧。

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

理想情况下，我希望像下图这样对齐：

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

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

现在，当我最小化浏览器时出现滚动，这是因为 overflow:auto。

他们是我控制图标搜索框宽度的方法吗？我认为更改字体大小就可以了。

Answer 1

为 .icon-bar 添加 display flex div。

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

此外，如 dipas 所述，删除左侧的位置。

Answer 2

使用 inline-blocks 更容易:

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

您也可以使用 flexboxes:

.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

对父组 .icon-bar 使用 display: table，对子组 .search-bar 使用 display: table-cell，

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

使用 font awesome 将工具栏与搜索文本框对齐

Aligning a toolbar with search text box using font awesome

html

css

flexbox

font-awesome