youbbs avatar

纯css 实现的list 两栏列表

🕞 by youbbs

效果:

1
2
3
4
5
6
Item 1    Item 7
Item 2    Item 8
Item 3    Item 9
Item 4    Item 10
Item 5    Item 11
Item 6    Item 12

http://jsfiddle.net/karlikdesign/fmroxyLy/

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

💘 相关文章

写一条评论

Based on Golang + fastHTTP + sdb | go1.16.3 Processed in 2ms