当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Aligning a toolbar with search text box using font awesome

问题描述:

I am trying a make a toolbar using font awesome with a few icons and search text box at the start.

I would like this to be ideally aligned in a way that it has search on the left most followed by the icons to its right.

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

网友答案:

Add display flex to the .icon-bar div.

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

Also, as dipas noted remove that position left.

网友答案:

It is easier using 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>
网友答案:

Use display: table on parent .icon-bar and display: table-cell on children groups .search-bar and .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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: