当前位置：首页 → 问答吧 → 列表竖排、定高。

列表竖排、定高。

时间：2011-08-01

来源：互联网

如图，数据不定，可以定高，怎样让列表内容自动换“列” ？？

------------------分割线-------------------------------------------------

效果如下：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

显示效果为：
1  5
2  6
3
4

------------------分割线-------------------------------------------------

有人提出这种办法，但是只支持IE，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>纯CSS自动换列（只适合IE）</title> <style type="text/css"> * { margin:0; padding:0; } body { font-size:12px; font-family:"宋体"; } #container { margin:4px; padding:4px; width:330px; height:180px; border:solid 1px red; /*关键*/ writing-mode:tb-rl; filter:FlipV(); } #container li { margin:2px; vertical-align:top; /*关键*/ display:inline; writing-mode:lr-tb; filter:FlipH(); } </style> </head> <body> <div id="container"> <ul> <li>第01名上海</li> <li>第02名北京</li> <li>第03名重庆</li> <li>第04名无锡</li> <li>第05名哈尔滨</li> <li>第06名锦州</li> <li>第07名呼和浩特</li> <li>第08名连云港</li> <li>第09名太原</li> <li>第10名合肥</li> <li>第11名海口</li> <li>第12名高雄</li> <li>第13名攀枝花</li> <li>第14名杭州</li> <li>第15名武汉</li> <li>第16名济宁</li> <li>第17名通辽</li> <li>第18名红烧排骨</li> <li>第19名冰露</li> <li>第20名金银花</li> <li>第21名衣柜</li> <li>第22名隔行扫描</li> <li>第23名投影</li> <li>第24名测距</li> <li>第25名拿破仑定理</li> <li>第26名非欧几何</li> <li>第27名天地武魂</li> <li></li> <li></li> <li>*此列表纯属虚构</li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 loversnie 于 2011-8-1 09:45 编辑 ]

作者: loversnie 发布时间: 2011-08-01