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

概述我正在尝试使用字体真棒制作工具栏,并在开始时使用一些图标和搜索文本框. 我希望这是理想的对齐方式,它在左边搜索,然后是右边的图标. .icon-bar { width: 40%; text-align: center; background-color: #555; overflow: auto; display:flex;}.icon-bar a { width: 我正在尝试使用字体真棒制作工具栏,并在开始时使用一些图标和搜索文本框.

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

.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 >    <input ID="searchinput" type="text" placeholder="Search" /><i ID="filtersubmit" ></i>    <a href="#"><i ></i></a>    <a href="#"><i ></i></a>    <a href="#"><i ></i></a>    <a  href="#"><i ></i></a>  </div></div>

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

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

完整浏览器屏幕的菜单：

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

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

解决方法 将显示flex添加到.icon-bar div.

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

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

总结

以上是内存溢出为你收集整理的html – 使用字体awesome将工具栏与搜索文本框对齐全部内容，希望文章能够帮你解决html – 使用字体awesome将工具栏与搜索文本框对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。