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

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

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

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

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

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