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

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

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

Answer 1

您可以将内容拆分为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项，则上述解决方案有效。

但是如果项目数量未知，您可以放置一个类来计算列数。例如，假设您在角度模型中有变量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

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

$(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

的信用

通过一些修改，我可以与此相处。这不是你想要的，但也许它会帮助其他有需要的人。

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;
}

更改列表排列 - HTML＆amp; CSS

3 个答案: