html如何让列表呈直线排列,html – 列表分成多列

CSS3列应该是最佳选择(更新：也是flexbox),但遗憾的是还没有广泛的支持.您可以通过简单的2d变换获得相同的结果(在I​​E9上也可用)

基本上所有列表项都浮动,无序列表旋转-90deg.和列表项目旋转了90度.

相关的CSS

div {

border : 1px green solid;

/* use easyclearing on div (or this workaround) */

overflow : auto;

height : auto;

}

/* clear */

ul + * { clear: both; }

ul {

float : left;

height : 160px; /* (30 + 2px) * 5 */

-webkit-transform : rotate(-90deg);

-moz-transform : rotate(-90deg);

-ms-transform : rotate(-90deg);

-o-transform : rotate(-90deg);

transform : rotate(-90deg);

}

li:nth-child(5n+1) { clear: right; }

li {

width : 30px;

height : 30px;

float : right;

margin : 1px;

background : #ccc;

-webkit-transform-origin : 50% 50%;

-moz-transform-origin : 50% 50%;

-ms-transform-origin : 50% 50%;

-o-transform-origin : 50% 50%;

transform-origin : 50% 50%;

-webkit-transform : rotate(90deg);

-moz-transform : rotate(90deg);

-ms-transform : rotate(90deg);

-o-transform : rotate(90deg);

transform : rotate(90deg);

}