html – 列表分成多列

参见英文答案 > How to display list items as columns?6个
我想将列表分成多列,每列应该有最多5个数据列表,如下图所示.请指导我如何实现这一目标？

解决方法

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

见http://jsfiddle.net/79rtx/1/

基本上所有列表项都浮动,无序列表旋转-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);
}

原文地址：https://www.jb51.cc/html/228710.html