使用标准时 <nav> & <ul>
创建出现在单行上的导航很容易:
桌面:http://jsfiddle.net/Baumr/Be9ma/1/
由于这是响应式布局,在较小的显示器上,导航将收缩为 3 列(甚至可能是 2 列)并带有媒体查询(未在代码中显示):
手机:http://jsfiddle.net/Baumr/Be9ma/
但它的间距不美观:
由于 nav li
的宽度元素是 33.3333% 那么间距就乱了——有些导航项很长,有些很短。但是间距不是流动的。
如何将每列调整为仅与最宽元素 + 填充/边距一样宽? 也就是说,无需分隔或嵌套 ul
out——这会破坏语义,并且在宽屏上查看时。
这是简单的 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;
}
很想听听您的想法。提前致谢!
附言我想强调跨浏览器兼容性和语义。
最佳答案
为移动设备添加一些@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 像素宽(仅供引用)的一个因素。 你的问题让我想起了最近读的一本书:"Mobile First" .简而言之:在移动设备上开始构建,然后从那里“向上”工作。绝对值得一试。
关于html - 响应式导航——从一行到三列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13115340/