更改名单的安排 - HTML和CSS(Change list arrangement - HTML

我拿到名单如下图所示

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

如何使列表安排这样。

 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：数量将增加，当滚动，像无限滚动。

Answer 1:

您可以将您的内容分成两列。

 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 */ } 

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> 

当你有8米或更少上述解决方案的工作li的物品。

但是，如果项目的数量是未知的，你可以把一个类来找出列数。 例如，考虑你在你的角模型具有可变qtItems 。 你可以这样做：

<ul ng-class = "'col' + Math.ceil(qtItems/4)">

然后使用CSS为每个类：

ul {
    width: 100%;
}
ul li {
    display: inline-block;
}

ul.col2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
}

ul.col2 li {
    width: 35%;
}

ul.col3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20%;
    -moz-column-gap: 20%;
    column-gap: 20%;
}

ul.col3 li {
    width: 20%;
}

ul.col4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10%;
    -moz-column-gap: 10%;
    column-gap: 10%;
}

ul.col4 li {
    width: 15%;
}

Answer 2:

获取的李的项目数量和行数除以它与该值设置为列数的属性。

 $(document).ready(function() { var numitems = $("#myList li").length; $("ul#myList").css("column-count",Math.round(8/2)); /* number of items / row */ }); 

 ul { width: 200px; } li { width: 25px; /* 200px / 8 = 25px */ display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="myList"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> 

您需要设置UL的宽度，因为行数甚至会设置列数后，依赖于宽度也。 你可以将其设置为100％过，但随后的行数将改变根据窗口大小。 要限制的行数为2，可能需要用于UL固定的宽度。

贷Poornima

随着一些modifíing我可以这样相处。 这不是你想要的，但也许它会帮助有需要的人。

Answer 3:

你可以采取两个UL在一个UL，你可以调整你究竟想看到的。

HTML

   <ul class="mainul">
    <li>
        <ul class="subul">
            <li>1</li>
            <li>2</li>
            <li>5</li>
            <li>6</li>
         </ul>
     </li>
     <li>
         <ul class="subul">
            <li>3</li>
            <li>4</li>
            <li>7</li>
            <li>8</li>
        </ul>
       </li>
    </ul>

CSS：

.mainul
{
 list-style-type:none;
}
.subul
{
    list-style-type: none;
}
.subul li
{
    display:inline;
}

文章来源: Change list arrangement - HTML & CSS