Webkit中的內聯div對齊問題？

你會發現在Firefox和Opera，頭地區冠軍（搜索圖標）（菜單）

但是在Chrome和Safari瀏覽器，它看起來像兩個元素拒絕被內聯，你會得到這樣的事情：

（搜索圖標）
安東Pugachevsky（菜單）

我一直在思考這個一期一會，任何想法，爲什麼這可能發生？

2013-10-20 antonpug

似乎是因爲'.navbar-header'是沒有明確的寬度浮動。一旦你給它一個寬度f.e. 300px，它會顯示你想要的。 – CBroe

如果您希望「搜索」出現在「品牌」之後，您是否可以不在HTML中對其進行重新排序？目前，搜索是第一位的。 – davidpauljunior

如果您希望使元素在CSS中正確浮動，您需要設置其容器的寬度，否則外容器只會獲得最大子元素的寬度。

在你的情況下，只需爲.navbar-header設置一個寬度，元素將以內聯方式顯示。

如果您希望搜索位於標題的左側，那麼只需將float：left添加到＃search-icon即可。

例如

.navbar-header{ width:50%; } 

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

2013-10-20 23:20:24 Will

解決了手頭的問題，但現在發生的情況是，當您將寬度縮小爲移動大小時，您會看到它已損壞（菜單按鈕未與屏幕右側對齊，並且搜索按鈕爲錯位） – antonpug

我修好了。必須使用媒體查詢將尺寸設置爲固定寬度，當尺寸小於一定尺寸時！謝謝 – antonpug

回答