css - ナビ中央のロゴ

Question

ファンデーションを使って中央にロゴの入ったナビを作ろうとしています。

そう：

home | about | [LOGO] | services | work

これが私のフィドルです

nav タグの下にあるすべての nav 要素とロゴを分けておきたいと思います。プッシュ/プル クラスを使用して整列させます。問題は、コード内の同じ行にあるにもかかわらず、機能していないことです。なんで？

Answer 1

ロゴをリスト アイテムにして、スクリーン リーダーから非表示にするだけです。

<li class="small-2 columns" aria-hidden="true">
    <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" />
</li>

デモ

または、Pete のアドバイスに従って、それをホーム リンクにします。

<li class="small-2 columns"> 
    <a href="/">
        <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" />
    </a>
</li>