更改列表排列-HTML和CSS

我得到如下列表

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8

如何使列表安排像这样.

 1  2    5  6    9  10
 3  4    7  8   11  ....etc

要么

 1  3    5  7     9 11
 2  4    6  8    10 .... etc 

我需要这种安排,因为我使用角度ng-repeat,所以我需要每个数字都有相同的元素.我不介意你们是否使用其他元素给出答案,但每个数字必须具有相同的元素.谢谢

p/s:滚动时数字会增加,就像无限滚动一样.

您可以将内容拆分为2列.

ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
    width: 100%;
}

li {
    display: inline-block;
    width: 35%; /* (parent 100% - parent gap 30%) / columns */
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8