使用css3进行UL分列

html文件内容很简单

<ul class="list-columns">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>  
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>  
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>  
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>      
</ul>

然后对.list-columns的class编写css3

.list-columns {
-moz-column-count: 3;
-moz-column-gap: 60px;
-webkit-column-count: 3;
-webkit-column-gap: 60px;
column-count: 3;
column-gap: 60px;
}

其中column-fill还有一个属性,但是测试浏览器不支持,所以去掉了。

奶牛 | 2018年08月1日

Leave a Reply