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

怎么让 div 内的 li 能根据浏览器的宽度自动换行呢?

  •  
  •   1etters · 2014-09-03 18:18:14 +08:00 · 3129 次点击
    这是一个创建于 3715 天前的主题,其中的信息可能已经有所发展或是发生改变。
    做了一个单页,在全屏浏览的时候没有问题,但是当浏览器宽度变小的很多的时候就只能显示网页左边的内容,右边的需要水平拉动才能看,在手机上那就更惨不忍睹了!
    有什么办法能让div内的多个li自动换行呢?
    31 条回复    2014-09-04 15:40:14 +08:00
    NemoAlex
        1
    NemoAlex  
       2014-09-03 18:30:24 +08:00
    Width: 100%
    Csineneo
        2
    Csineneo  
       2014-09-03 18:34:13 +08:00
    <code>word-wrap: break-word; word-break: break-word;</code>
    1etters
        3
    1etters  
    OP
       2014-09-03 18:44:21 +08:00
    @Csineneo 我是图片
    1etters
        4
    1etters  
    OP
       2014-09-03 18:44:32 +08:00
    @NemoAlex 试过
    jsonline
        5
    jsonline  
       2014-09-03 18:51:11 +08:00 via Android
    响应式
    Csineneo
        6
    Csineneo  
       2014-09-03 18:57:37 +08:00
    @1etters max-width
    wsph123
        7
    wsph123  
       2014-09-03 19:04:57 +08:00 via iPhone
    唔 Mark 好像遇到相同问题了
    raincious
        8
    raincious  
       2014-09-03 19:18:44 +08:00
    1、Body设定固定宽度,完全不理会手机用户(事实上设定一个小于1000px的固定宽度手机用户横屏也能凑合看,我之前花半天做来玩的页面 http://t.cn/RhyYjHm ,没想到拿手机横着看也凑合),适合不想认真做或者要求非常不高/时间紧的方案。

    2、响应式。用media query做两套方案。但是要求CSS编写灵活,需要一定技巧。
    刚还敲了一段代码,但是猛然还是觉得丢个链接就好:
    http://getbootstrap.com/
    pgfast
        9
    pgfast  
       2014-09-04 01:53:22 +08:00
    你需要的不是让 div 内的 li 能根据浏览器的宽度自动换行
    而是外层容器的宽度自适应。简单点就设置成百分比就可以了。
    liaa
        10
    liaa  
       2014-09-04 08:02:46 +08:00
    ```html
    <meta name="viewport" content="width=device-width">
    ```

    给楼主一个建议. 要让大家帮忙最好给个 demo 啊.
    1etters
        11
    1etters  
    OP
       2014-09-04 08:30:20 +08:00
    @liaa好来! demo在这 anytouch.org
    1etters
        12
    1etters  
    OP
       2014-09-04 08:30:37 +08:00
    @raincious OK!我必须尝试下
    1etters
        13
    1etters  
    OP
       2014-09-04 08:31:46 +08:00
    @pgfast 我也这么怀疑!准备把多个外层都用百分比
    1etters
        14
    1etters  
    OP
       2014-09-04 08:59:16 +08:00
    @pgfast 刚刚试过了 外层容器百分比还真没用
    liaa
        15
    liaa  
       2014-09-04 10:00:04 +08:00
    @1etters =,= 刚刚我在调教你的网站...没想到你也同时在调教... 结果刚调好刷新下就变了
    1etters
        16
    1etters  
    OP
       2014-09-04 10:34:54 +08:00
    @liaa 汗!我现在不动了!
    liaa
        17
    liaa  
       2014-09-04 10:38:06 +08:00
    @1etters 现在看不是好了麦... 把.row 上面的左右 margin 去掉就完全没有横向滚动条了
    1etters
        18
    1etters  
    OP
       2014-09-04 10:43:15 +08:00
    @liaa 我这里还是不行啊,刚刚去掉了row的margin
    1etters
        19
    1etters  
    OP
       2014-09-04 10:47:12 +08:00
    @liaa 我明白了!这样是随浏览器宽度缩放!其实我之前是想让它换行。你看我是有三个li标签
    1etters
        21
    1etters  
    OP
       2014-09-04 11:03:26 +08:00
    @liaa 很奇怪这两句我已经删除了,但是我这里没有出现截图上的效果!而是改变浏览器宽度的时候图片什么的都跟着缩小了
    liaa
        23
    liaa  
       2014-09-04 11:53:09 +08:00
    @1etters http://pan.baidu.com/s/192juA 修改过的地方被 "NOTE"注释包住了. 你想看我改了哪里只要搜索 "NOTE" 就可以找到.
    1etters
        24
    1etters  
    OP
       2014-09-04 13:21:55 +08:00
    @liaa OK 我正在尝试
    1etters
        25
    1etters  
    OP
       2014-09-04 13:31:16 +08:00
    @liaa li加了那个样式后 我这还是没出效果
    liaa
        26
    liaa  
       2014-09-04 13:33:04 +08:00
    ...样式表也有相应的修改: blog.css
    1etters
        27
    1etters  
    OP
       2014-09-04 13:34:18 +08:00
    @liaa 你发我那个又确实有 好奇怪
    liaa
        28
    liaa  
       2014-09-04 13:34:56 +08:00
    不奇怪...是你自己姿势错误
    1etters
        29
    1etters  
    OP
       2014-09-04 13:37:18 +08:00
    @liaa 太感谢了!去掉了li的宽度定义!虽然不明白原因 但是确实成功了,看这个主题的收藏就知道很多人遇到这个问题了
    liaa
        30
    liaa  
       2014-09-04 14:01:11 +08:00
    解决问题就好. 不过你那么一个简单的页面却写了那么重(多)的 CSS,如果用于生产的话实在不妥.
    1etters
        31
    1etters  
    OP
       2014-09-04 15:40:14 +08:00
    @liaa 哈哈,回头精简下!现在先赶出来
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5529 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 08:31 · PVG 16:31 · LAX 00:31 · JFK 03:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.