如何控制 li 宽度超出 ul 不换行?

[pimin]

打算改个主题给博客用.
问题是导航菜单在小屏上可能会出现超宽的问题.
我期望的结果是如果超宽,就舍弃掉超出的部分.
我理解应该是 overflow:hidden+display:inline-block
结果怎么改还是换行.
求前端大神指导下.

DOM 结构是:

    <ul>
    <li> <a>首 页</a> </li>
    <li> <a>编 程</a> </li>
    <li> <a>随 笔</a> </li>
    <li> <a>归 档</a> </li>
    <li> <a>关 于</a> </li>
    <ul>

[jjplay]

你这个只是 overflow 没有正确执行，这种正确的方式应该是百分比， 20%

[int64ago]

舍弃？

还是用下拉做响应式吧

[iNaru]

ul{white-space: nowrap}

[XianZaiZhuCe]

display:inline-block 会有一些多余的宽度出现。 试试 float:left ，然后 width:20%

[paloalto]

<pre>
ul {
display: -webkit-flex;
display: flex;
}

li {
-webkit-flex: 1 0;
flex: 1 0;
max-width: 20%;
text-align: center;
}

a {
display: block;
margin: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</pre>

[likai]

display:table-cell;

[likai]

没仔细看。是要舍弃掉。用上面几位的

[pimin]

@int64ago
我是觉得下拉菜单本增加了页面层级，并不是一个万金油方案。
其实主要是我没能找到一个合适的位置放汉堡菜单。

[zrp1994]

@pimin
我记得我用的是 table 而不是 ul 实现了楼主说的效果。
可以在手机模式下浏览： http://ppoffice.github.io/hexo-theme-icarus/ 查看导航栏的效果

[pimin]

@zrp1994 O(∩_∩)O 谢谢
你的方案通用性更好一些.
我最后用了 width=20%这种相对固定的方案.
缺点就是如果分享给别人的话可能埋了个坑.
英文的话很容易超长.

没用 @paloalto 的 display: flex; 因为查了下说 IE9 不兼容.
没 win7 也没法验证.

[DaPanda]

用 flexbox 吧
http://output.jsbin.com/yegivi

[DaPanda]

额，好吧，发完 flexbox 才看到楼主最新的回复

[pimin]

@DaPanda
我是萌新，想法不一定对
我觉得 IE9 作为 win7 默认浏览器，考虑 win7 占有率适当照顾下。

[DaPanda]

@pimin 我也是新手
IE9 的话，楼上说的 white-space:nowrap 可以的吧

[pimin]

@DaPanda
因为文本要垂直居中， li,a 设置了 display:block ，不知道是不是这个原因导致 white-space:nowrap 无效