专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

纯css 实现的list 两栏列表

发布时间: 文章来源:www.iduyao.cn 采编人员:毒药  
效果:
Item 1    Item 7
Item 2    Item 8
Item 3    Item 9
Item 4    Item 10
Item 5    Item 11
Item 6    Item 12

code:

<style>
.list-columns {
-moz-column-count: 2;
-moz-column-gap: 60px;
-webkit-column-count: 2;
-webkit-column-gap: 60px;
column-count: 2;
column-gap: 60px;
}
</style>

<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>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
   2394阅读

column-gap: 60px; 这里的60px是两列直接的间距

毒药   2022-04-08 20:34:37
1
登录 后发表评论

热门分类: