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; }