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

V2EX = way to explore

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

现在注册

已注册用户请登录

V2EX 提问指南

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

做了一个单页，在全屏浏览的时候没有问题，但是当浏览器宽度变小的很多的时候就只能显示网页左边的内容，右边的需要水平拉动才能看，在手机上那就更惨不忍睹了！
有什么办法能让div内的多个li自动换行呢？

div

宽度

浏览器

31 条回复 • 2014-09-04 15:40:14 +08:00

NemoAlex

2014-09-03 18:30:24 +08:00

Width: 100%

Csineneo

2014-09-03 18:34:13 +08:00

<code>word-wrap: break-word; word-break: break-word;</code>

1etters

2014-09-03 18:44:21 +08:00

@Csineneo 我是图片

1etters

2014-09-03 18:44:32 +08:00

@NemoAlex 试过

jsonline

2014-09-03 18:51:11 +08:00 via Android

响应式

Csineneo

2014-09-03 18:57:37 +08:00

@1etters max-width

wsph123

2014-09-03 19:04:57 +08:00 via iPhone

唔 Mark 好像遇到相同问题了

raincious

2014-09-03 19:18:44 +08:00

1、Body设定固定宽度，完全不理会手机用户（事实上设定一个小于1000px的固定宽度手机用户横屏也能凑合看，我之前花半天做来玩的页面 http://t.cn/RhyYjHm ，没想到拿手机横着看也凑合），适合不想认真做或者要求非常不高/时间紧的方案。

2、响应式。用media query做两套方案。但是要求CSS编写灵活，需要一定技巧。
刚还敲了一段代码，但是猛然还是觉得丢个链接就好：
http://getbootstrap.com/

pgfast

2014-09-04 01:53:22 +08:00

你需要的不是让 div 内的 li 能根据浏览器的宽度自动换行
而是外层容器的宽度自适应。简单点就设置成百分比就可以了。

liaa

2014-09-04 08:02:46 +08:00

```html
<meta name="viewport" content="width=device-width">
```

给楼主一个建议. 要让大家帮忙最好给个 demo 啊.

1etters

2014-09-04 08:30:20 +08:00

@liaa好来！ demo在这 anytouch.org

1etters

2014-09-04 08:30:37 +08:00

@raincious OK！我必须尝试下

1etters

2014-09-04 08:31:46 +08:00

@pgfast 我也这么怀疑！准备把多个外层都用百分比

1etters

2014-09-04 08:59:16 +08:00

@pgfast 刚刚试过了外层容器百分比还真没用

liaa

2014-09-04 10:00:04 +08:00

@1etters =,= 刚刚我在调教你的网站...没想到你也同时在调教... 结果刚调好刷新下就变了

1etters

2014-09-04 10:34:54 +08:00

@liaa 汗！我现在不动了！

liaa

2014-09-04 10:38:06 +08:00

@1etters 现在看不是好了麦... 把.row 上面的左右 margin 去掉就完全没有横向滚动条了

1etters

2014-09-04 10:43:15 +08:00

@liaa 我这里还是不行啊，刚刚去掉了row的margin

1etters

2014-09-04 10:47:12 +08:00

@liaa 我明白了！这样是随浏览器宽度缩放！其实我之前是想让它换行。你看我是有三个li标签

liaa

2014-09-04 10:48:10 +08:00

![](https://dl.dropboxusercontent.com/u/85873187/mdi/mdi-no2014-09-04104633.png)

1etters

2014-09-04 11:03:26 +08:00

@liaa 很奇怪这两句我已经删除了，但是我这里没有出现截图上的效果！而是改变浏览器宽度的时候图片什么的都跟着缩小了

1etters

2014-09-04 11:10:21 +08:00

@liaa http://pan.baidu.com/s/1qWjrjdE#0-tqq-1-25037-89b7933b38b0586d98eb9d131fa70b46

liaa

2014-09-04 11:53:09 +08:00

@1etters http://pan.baidu.com/s/192juA 修改过的地方被 "NOTE"注释包住了. 你想看我改了哪里只要搜索 "NOTE" 就可以找到.

1etters

2014-09-04 13:21:55 +08:00

@liaa OK 我正在尝试

1etters

2014-09-04 13:31:16 +08:00

@liaa li加了那个样式后我这还是没出效果

liaa

2014-09-04 13:33:04 +08:00

...样式表也有相应的修改: blog.css

1etters

2014-09-04 13:34:18 +08:00

@liaa 你发我那个又确实有好奇怪

liaa

2014-09-04 13:34:56 +08:00

不奇怪...是你自己姿势错误

1etters

2014-09-04 13:37:18 +08:00

@liaa 太感谢了！去掉了li的宽度定义！虽然不明白原因但是确实成功了，看这个主题的收藏就知道很多人遇到这个问题了

liaa

2014-09-04 14:01:11 +08:00

解决问题就好. 不过你那么一个简单的页面却写了那么重(多)的 CSS,如果用于生产的话实在不妥.

1etters

2014-09-04 15:40:14 +08:00

@liaa 哈哈，回头精简下！现在先赶出来