首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Coding
V2EX  ›  问与答

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

  •  
  •   pimin · 2016-05-29 09:48:57 +08:00 · 2181 次点击
    这是一个创建于 1293 天前的主题,其中的信息可能已经有所发展或是发生改变。

    打算改个主题给博客用.
    问题是导航菜单在小屏上可能会出现超宽的问题.
    我期望的结果是如果超宽,就舍弃掉超出的部分.
    我理解应该是 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>
    
    15 回复  |  直到 2016-05-29 16:51:38 +08:00
        1
    jjplay   2016-05-29 09:51:01 +08:00
    你这个只是 overflow 没有正确执行,这种正确的方式应该是百分比, 20%
        2
    int64ago   2016-05-29 09:56:43 +08:00 via Android
    舍弃?

    还是用下拉做响应式吧
        3
    iNaru   2016-05-29 10:05:40 +08:00
    ul{white-space: nowrap}
        4
    XianZaiZhuCe   2016-05-29 10:07:34 +08:00
    display:inline-block 会有一些多余的宽度出现。 试试 float:left ,然后 width:20%
        5
    paloalto   2016-05-29 10:16:41 +08:00   ♥ 2
    <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>
        6
    likai   2016-05-29 10:24:41 +08:00
    display:table-cell;
        7
    likai   2016-05-29 10:27:25 +08:00
    没仔细看。是要舍弃掉。用上面几位的
        8
    pimin   2016-05-29 11:47:20 +08:00 via Android
    @int64ago
    我是觉得下拉菜单本增加了页面层级,并不是一个万金油方案。
    其实主要是我没能找到一个合适的位置放汉堡菜单。
        9
    zrp1994   2016-05-29 15:26:32 +08:00   ♥ 1
    @pimin
    我记得我用的是 table 而不是 ul 实现了楼主说的效果。
    可以在手机模式下浏览: http://ppoffice.github.io/hexo-theme-icarus/ 查看导航栏的效果
        10
    pimin   2016-05-29 16:01:20 +08:00
    @zrp1994 O(∩_∩)O 谢谢
    你的方案通用性更好一些.
    我最后用了 width=20%这种相对固定的方案.
    缺点就是如果分享给别人的话可能埋了个坑.
    英文的话很容易超长.

    没用 @paloalto 的 display: flex; 因为查了下说 IE9 不兼容.
    没 win7 也没法验证.
        11
    DaPanda   2016-05-29 16:07:50 +08:00   ♥ 1
        12
    DaPanda   2016-05-29 16:09:26 +08:00   ♥ 1
    额,好吧,发完 flexbox 才看到楼主最新的回复
        13
    pimin   2016-05-29 16:16:23 +08:00 via Android
    @DaPanda
    我是萌新,想法不一定对
    我觉得 IE9 作为 win7 默认浏览器,考虑 win7 占有率适当照顾下。
        14
    DaPanda   2016-05-29 16:36:51 +08:00
    @pimin 我也是新手
    IE9 的话,楼上说的 white-space:nowrap 可以的吧
        15
    pimin   2016-05-29 16:51:38 +08:00 via Android
    @DaPanda
    因为文本要垂直居中, li,a 设置了 display:block ,不知道是不是这个原因导致 white-space:nowrap 无效
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3296 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 53ms · UTC 10:19 · PVG 18:19 · LAX 02:19 · JFK 05:19
    ♥ Do have faith in what you're doing.