html - Webkit のインライン div 配置の問題?

Question

antonpug.comをチェックすると

Firefox と Opera では、ヘッダーに Title (Search Icon) (Menu) と記載されていることに気付くでしょう。

ただし、Chrome と Safari では、両方の要素がインライン化を拒否しているようで、次のような結果になります。

(検索アイコン)
アントン・プガチェフスキー (メニュー)

私はこれについてしばらく考えていましたが、なぜこれが起こっているのでしょうか？

Answer 1

CSS で要素を適切にフロートさせたい場合は、コンテナーの幅を設定する必要があります。そうしないと、外側のコンテナーは最大の子要素の幅しか取得できません。

あなたの場合、 .navbar-header の幅を設定するだけで、要素がインラインで表示されます。

タイトルの左側で検索したい場合は、float:left を #search-icon に追加します。

例えば

.navbar-header{ width:50%; }

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