纯css 实现的list 两栏列表
毒药 1834阅读
效果:
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>
1834阅读
column-gap: 60px; 这里的60px是两列直接的间距
毒药 297.7天前
1
请 登录 后发表评论