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

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

我希望这是一个理想的方式，它有一个最左边的搜索，然后在其右边的图标对齐

。图标栏{
宽度：40%；
文本对齐：居中；
背景色：#555；
溢出：自动；
显示器：flex；
}
.图标栏a{
宽度：15%；
填充：12px0；
浮动：左；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：36px；
}
.图标栏a：悬停{
背景色：#000；
}
#过滤液{
位置：相对位置；
z指数：1；
左：-25px；
顶部：1px；
颜色：#7b；
光标：指针；
宽度：0；
}

---

将display flex添加到.icon bar div

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

---

此外，如dipas所述，将该位置移到左侧。

使用

内联块更容易：


。图标栏{
文本对齐：居中；
背景色：#555；
溢出：自动；
}
.图标栏a{
填充：12px0；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：36px；
}
.图标栏a：悬停{
背景色：#000；
}
#过滤液{
颜色：#7b；
光标：指针；
}
.图标栏>*{
显示：内联块；
垂直对齐：中间对齐；
填充：10px；
}
在父组
上使用
显示：表格
。在子组
上使用图标栏
和
显示：表格单元格
。搜索栏
和
。按钮包装器


。图标栏{
显示：表格；
填充：0 20px；
背景色：#555；
溢出：自动；
}
.搜索栏，.按钮包装{
显示：表格单元格；
垂直对齐：中间对齐；
}
#过滤液{
颜色：#7b；
光标：指针；
}
.按钮包装a{
显示：内联块；
填充：12px；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：36px；
}
.按钮包装器a：悬停{
背景色：#000；
}

没有所谓的
位置：左
谢谢@dippas。我刚修好了手帕。正如我所期望的那样，它工作得非常好。但我无法控制搜索框的宽度。因此，当我最小化浏览器时，底部会出现一个滚动条。如果不需要滚动条，请删除自动溢出。您可以控制输入的宽度，如.icon-bar-input{width:100%；}或您需要的任何内容。此外，不要忘记，当您在较小的屏幕上时，您可能希望.icon-bar部分覆盖整个宽度。如果你是在电话上，30%的宽度将太小。是否有一种方法，我可以在评论中附加图像，以显示如果我保留或删除溢出的图像，它的外观。我不这样认为。你可以得到一些截图应用程序，比如Jing或类似的东西。