使用标准<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;
}
很想听听你的想法。提前谢谢!
P.S。我想强调跨浏览器兼容性和语义。
答案 0 :(得分: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 }
}
投注字体大小将是320px宽(FYI)的因素。 你的问题让我想起了我最近读过的一本书:"Mobile First"。简而言之:在移动设备上开始构建,然后从那里“开始”工作。值得一试。