Html Webkit中的内联div对齐问题？

如果你退房

您会注意到，在Firefox和Opera中，标题表示标题（搜索图标）（菜单）

然而，在Chrome和Safari中，这两个元素似乎都拒绝内联，您会得到如下结果：

（搜索图标）
安东·普加切夫斯基（菜单）

---

我已经思考了一段时间了，你知道为什么会发生这种情况吗？

如果你想让元素在CSS中正确浮动，你需要设置它们的容器的宽度，否则外部容器只会获得最大子元素的宽度

在您的情况下，只需为.navbar标题设置一个宽度，元素就会以内联方式显示

如果希望搜索位于标题的左侧，只需在#搜索图标中添加float:left即可

比如说

.navbar-header{ width:50%; }

.navbar-header #search-icon{ float:left; margin-right:30px; }

---

这似乎是因为

.navbar标题

是浮动的，没有明确的宽度。一旦你给它一个f.e.300px的宽度，它将显示为你想要的。如果你想“搜索”出现在“品牌”之后，你能不能在HTML中重新排序？目前，搜索是第一位的。这解决了手头上的问题，但现在发生的是，当你将宽度缩小到手机大小时，你会看到它坏了（菜单按钮未与屏幕右侧对齐，搜索按钮位置错误）我修复了它。当小于某个大小时，必须使用媒体查询将大小设置为固定宽度！谢谢