antonpug.comをチェックすると
Firefox と Opera では、ヘッダーに Title (Search Icon) (Menu) と記載されていることに気付くでしょう。
ただし、Chrome と Safari では、両方の要素がインライン化を拒否しているようで、次のような結果になります。
(検索アイコン)
アントン・プガチェフスキー (メニュー)
私はこれについてしばらく考えていましたが、なぜこれが起こっているのでしょうか?
antonpug.comをチェックすると
Firefox と Opera では、ヘッダーに Title (Search Icon) (Menu) と記載されていることに気付くでしょう。
ただし、Chrome と Safari では、両方の要素がインライン化を拒否しているようで、次のような結果になります。
(検索アイコン)
アントン・プガチェフスキー (メニュー)
私はこれについてしばらく考えていましたが、なぜこれが起こっているのでしょうか?
CSS で要素を適切にフロートさせたい場合は、コンテナーの幅を設定する必要があります。そうしないと、外側のコンテナーは最大の子要素の幅しか取得できません。
あなたの場合、 .navbar-header の幅を設定するだけで、要素がインラインで表示されます。
タイトルの左側で検索したい場合は、float:left を #search-icon に追加します。
例えば
.navbar-header{ width:50%; }
.navbar-header #search-icon{ float:left; margin-right:30px; }