更改列表排列 - HTML和CSS

我拿到名單像下面更改列表排列 - HTML和CSS

<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：滾動時數字會增加，就像無限滾動一樣。

來源

2015-02-12 saf21

你可以有更多的否定的。 'li'？如果是，他們的訂單應該是什麼？ – Harry 2015-02-12 07:59:07

我認爲你可以使用你的自定義orderBy過濾器[像這樣]（http://stackoverflow.com/questions/12040395/custom-sort-function-in-ng-repeat）。只是我需要弄清楚這個系列的公式。你已經？ – amitthk 2015-02-12 07:59:59

@哈里，我更新了這個問題，它將會有很多'li'和相同的順序。 – saf21 2015-02-12 08:30:59

您可以將內容分割成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%; 
}

來源

2015-02-12 08:33:36

獲取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

有了一些modifíing我可以這樣相處。這不是你想要的，但也許它會幫助有需要的人。

來源

2015-02-12 08:27:25 balintpekker

你可以在一個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; 
}

來源

2015-02-12 08:27:27

更改列表排列 - HTML和CSS

回答

相關問題