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

This topic created in 3635 days ago, the information mentioned may be changed or developed.

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

jjplay

May 29, 2016

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

int64ago

May 29, 2016 via Android

舍弃？

还是用下拉做响应式吧

iNaru

May 29, 2016

ul{white-space: nowrap}

XianZaiZhuCe

May 29, 2016

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

paloalto

May 29, 2016

<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

May 29, 2016

display:table-cell;

likai

May 29, 2016

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

pimin

May 29, 2016 via Android

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

zrp1994

May 29, 2016

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

pimin

May 29, 2016

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

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

DaPanda

May 29, 2016

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

DaPanda

May 29, 2016

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

pimin

May 29, 2016 via Android

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

DaPanda

May 29, 2016

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

pimin

May 29, 2016 via Android

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