css - 导航中心的标志

Question

我正在尝试使用基础在中心制作带有徽标的导航。

所以：

home | about | [LOGO] | services | work

这是我的小提琴

我想将导航标签下的所有导航内容和徽标分开。我使用推/拉类来对齐它。问题是，即使它在代码的同一行中，它也不起作用？为什么？

Answer 1

我只需将徽标设为列表项并将其隐藏在屏幕阅读器中：

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

演示

或者采纳皮特的建议，将其设为主页链接。

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