Html 响应式导航&x2014；从一条管线到三个液柱？

使用标准的

&

时，很容易创建显示在单行上的导航：

桌面：

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

流动电话：

但它的间隔并不美观：

由于

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>​

我很想听听你的想法。提前谢谢你

---

另外，我想强调跨浏览器兼容性和语义

添加一些针对移动设备的@media查询

您需要打开/收缩中心栏以查看更改

@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像素宽（仅供参考）的一个因素。

---

你的问题让我想起了我最近读的一本书：。简而言之：从mobile开始构建，然后从那里开始“升级”。值得一看

是否使用基于百分比的填充或边距？不完全确定你想要做什么。这是个问题……他们需要设置最大/最小宽度以保持良好的间距。如果“XX”和“XXXX”的最大宽度设置为4X，“XX”不会采用任意/刚性宽度。在100%布局中，6列将转换为“16.667%”。“33.333”似乎适合小屏幕显示，但导航中的间隙看起来很糟糕。不能两全其美——除非有某种类型的控制——比如为父母、孩子等设定一个最大值（除此之外——不让4个字母的导航和12个字母的兄弟姐妹混合在一起也会有帮助……只是说’）@Matt——你怎么告诉我这不是问题，当你自己的评论说，“不完全确定你想做什么。”？？啊..我错过了

106

和

160

这两个不同的值，以为你只是回答了媒体查询的建议。谢谢Dawson，是的，我一直在首先构建这部手机（我喜欢这本书），但我也在考虑HTML语义的情况下提出了更多问题（因此我从桌面示例开始）。你的例子很好，谢谢！一个问题-为什么要进行第二次媒体查询？另外，因为你的解决方案依赖于设置

文本对齐：居中

，所以我的长链接长度不同，这看起来有点奇怪。无法左对齐并居中列，嗯？新提琴：。至于文本对齐…我认为在哪里都不重要宽度是值得关注的，但它看起来并不正确。奇怪的是，我敢打赌，在大屏幕上，导航也不是“正确”对齐的——但我们的眼睛不会像在狭窄区域中压缩所有内容时那样拾取导航。当我们“放大”时，变化/缺陷也是如此

@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 }
}