Change list arrangement - HTML & CSS

Question

I got list like below

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

How do make the list arrangement to like this.

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

or

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

I need this arrangement because i'm using angular ng-repeat, so i need every number has the same element. I dont mind if you guys give the answer using other element, but every number must have same element. Thanks

p/s: the number will increase when scroll, like infinite scroll.

Would you be having more no. of `li`? If yes, what should be the order for them? — Harry, Feb 12 '15 at 07:59
I think you can do it using your custom orderBy filter [like this](http://stackoverflow.com/questions/12040395/custom-sort-function-in-ng-repeat). Just that I will need to figure out the formula for the series. Do you have already? — amitthk, Feb 12 '15 at 07:59
@Harry, i update the question, it will be a lot of `li` with the same order. — saf21, Feb 12 '15 at 08:30
@amitthk..i also figure that out but didn't have the formula yet. — saf21, Feb 12 '15 at 08:34
possible duplicate of [How to display a list in two rows?](http://stackoverflow.com/questions/20570359/how-to-display-a-list-in-two-rows) — Manoz, Feb 12 '15 at 08:36

Jose Rui Santos · Accepted Answer · 2015-02-12T08:57:26.220

You can split your content into 2 columns.

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>

The solution above works when you have 8 or less li items.

But if the number of items is unknown, you can place a class to figure out the number of columns. For example, consider you have in your angular model a variable qtItems. You can do something like this:

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

Then use CSS for each class:

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

score 1 · Answer 2 · edited May 23 '17 at 12:29

Get the number of LI items and divide it by the number of rows and set that value to column-count property.

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

You need to set the width of UL, because number of rows will depend on the width also even after setting the column-count. You can set it to 100% too, but then the number of rows will change based on the window size. To restrict the number of rows to 2, fixed width for UL may be required.

Credits to Poornima

With some modifíing I could get along with this. It's not what you wanted, but maybe it will help others in need.

score 0 · Answer 3 · answered Feb 12 '15 at 08:27

you can take two ul in one ul and you can adjust which you exactly want to see.

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

3 Answers3

Linked