Webkit中的内联div对齐问题？

Question

如果您查看antonpug.com

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

但是在Chrome和Safari中，似乎这两个元素都拒绝内联，您会得到如下所示的信息：

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

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

Answer 1

如果要使元素在CSS中正确浮动，则需要设置其容器的宽度，否则外部容器将仅获得最大子元素的宽度。

在您的情况下，只需为.navbar-header设置宽度，元素将内联显示。

如果您希望搜索在标题的左侧，则只需将float：left添加到＃search-icon即可。

例如

.navbar-header{ width:50%; }

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