使用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日
  • huangjun 2018年08月23日 at 11:56 上午
    你博客跳转页面的形式好酷~!
    • 奶牛 2019年05月3日 at 8:13 下午
      还好还好,主要是别人主题写得好,哈哈
Comments are closed.