更改列表排列 - HTML & CSS

Question

我得到如下列表

<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

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

p/s：滚动时数字会增加，就像无限滚动一样。

Answer 1

获取 LI 项的数量并将其除以行数并将该值设置为列数属性。

$(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%，但随后行数将根据 window 大小而变化。要将行数限制为 2，可能需要 UL 的固定宽度。

感谢Poornima

通过一些修改，我可以接受它。这不是你想要的，但也许它会帮助有需要的人。

Answer 2

您可以在一个 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;
}

Answer 3

您可以将您的内容分成 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 */
}

<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 项时，上述解决方案有效。

但如果项目数未知，您可以放置一个 class 来计算列数。例如，假设您的 angular 模型中有一个变量 qtItems。你可以这样做：

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

然后对每个 class 使用 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%;
}

更改列表排列 - HTML & CSS

Change list arrangement - HTML & CSS

html

css

angularjs-ng-repeat