html - 响应式导航——从一行到三列？

Question

使用标准<nav> & <ul>时，很容易创建显示在单行上的导航：

桌面：http: //jsfiddle.net/Baumr/Be9ma/1/

由于这是用于响应式布局，因此在较小的显示器上，导航将收缩为 3 列（甚至可能是 2 列），并带有媒体查询（代码中未包含）：

手机：http: //jsfiddle.net/Baumr/Be9ma/

但它在美学上没有间隔：

由于nav li元素的宽度是 33.3333%，所以间距是混乱的——一些导航项很长，一些很短。但是间距不是流动的。

如何将每列调整为仅与最宽元素 + 填充/边距一样宽？也就是说，没有分离或嵌套ul输出——这会破坏语义，并且在宽显示器上查看时。

这是简单的 HTML：

<nav>
    <ul>
    <li>Home</li>
    <li>Very Long Link</li>
    <li>Blog</li>
    <li>About</li>
    <li>Also Long Link</li>
    <li>Email</li>
    </ul>
</nav>​

这是相关的CSS：

nav {
    clear: both;
    background: pink;
}

    nav ul {
        padding: 20px 10px 0 30px;
        margin: 0;
        overflow: hidden;
        font-size: 16px;
    }

    nav li {
        font-variant: small-caps;
        text-decoration: underline;
        list-style: none;
        display: block;
        float: left;
        padding: 0 0 30px 0;
        margin: 0; 
        width: 33.33333%;
        float: left;
}

很想听听你的想法。先感谢您！

PS 我想强调跨浏览器的兼容性和语义。

Answer 1

为移动设备添加一些@media 查询。

http://jsfiddle.net/bf9cB/
您需要打开/收缩中心栏以查看更改

@media only screen and (max-width: 480px) {
    nav li { max-width:160px; text-align:center } /* This would only allow 3 to fit */
}

@media only screen and (max-width: 320px) {
    nav li { max-width:106px; text-align:center }
}

投注字体大小将是 320 像素宽（仅供参考）的一个因素。你的问题让我想起了我最近读的一本书：《移动优先》。简而言之：在移动设备上开始构建，然后从那里“向上”工作。Def值得一试。