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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3091 天前的主题，其中的信息可能已经有所发展或是发生改变。

打算改个主题给博客用.
问题是导航菜单在小屏上可能会出现超宽的问题.
我期望的结果是如果超宽,就舍弃掉超出的部分.
我理解应该是 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>

Overflow

DOM

超出

hidden

15 条回复 • 2016-05-29 16:51:38 +08:00

jjplay

2016-05-29 09:51:01 +08:00

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

int64ago

2016-05-29 09:56:43 +08:00 via Android

舍弃？

还是用下拉做响应式吧

iNaru

2016-05-29 10:05:40 +08:00

ul{white-space: nowrap}

XianZaiZhuCe

2016-05-29 10:07:34 +08:00

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

paloalto

2016-05-29 10:16:41 +08:00

<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

2016-05-29 10:24:41 +08:00

display:table-cell;

likai

2016-05-29 10:27:25 +08:00

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

pimin

2016-05-29 11:47:20 +08:00 via Android

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

zrp1994

2016-05-29 15:26:32 +08:00

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

pimin

2016-05-29 16:01:20 +08:00

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

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

DaPanda

2016-05-29 16:07:50 +08:00

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

DaPanda

2016-05-29 16:09:26 +08:00

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

pimin

2016-05-29 16:16:23 +08:00 via Android

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

DaPanda

2016-05-29 16:36:51 +08:00

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

pimin

2016-05-29 16:51:38 +08:00 via Android

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