How to display the list in a vertical way order using css

Question

Trying to achieve to display the order of my lists in a vertical order.

I have 6 lists, i need to display that the first three should display on the left side and remaining on the right side.

Expected output :

a d
b e
c f

Current Output:

a b
c d
e f

HTML:

<ul>
    <li class="list">
        <a>a</a>
        <ul>
            <li>1</li>
        </ul>
    </li>
    <li class="list">
        <a>b</a>
        <ul>
            <li>2</li>
        </ul>
    </li>
    <li class="list">
        <a>c</a>
        <ul>
            <li>3</li>
        </ul>
    </li>
    <li class="list">
        <a>d</a>
        <ul>
            <li>4</li>
        </ul>
    </li>
    <li class="list">
        <a>e</a>
        <ul>
            <li>5</li>
        </ul>
    </li>
    <li class="list">
        <a>f</a>
        <ul>
            <li>6</li>
        </ul>
    </li>
</ul>

I have attached what I have tried: Demo

And it should support IE8

@LDJ : Column-count works, but it is not supporting internet explorer 8 — , Sep 11 '15 at 12:52
To support all browsers you should change your html, CSS/JS solutions will most likely have compatibility issues with IE 6/7/8 — Aramil Rey, Sep 11 '15 at 12:57
I don't think the other answers actually get the desired output like you want. When I tried to run the code, I didn't get the expected output like you wanted it. This sounds like a job for Flexbox... So I have a partially working solution so far: http://jsfiddle.net/kgnv2zdw/2/. The HTML change includes adding two list items containing one list each, which displays these two items side-by-side. Is this going in the right direction or did I miss something completely? — UltraSonja, Sep 11 '15 at 13:20

score 2 · Answer 1 · edited Sep 11 '15 at 12:46

2

Try using

ul {
  column-count: 2;
}

edited Sep 11 '15 at 12:46

m4n0

29,823
27
76
89

answered Sep 11 '15 at 12:39

jonazz

41
3

@R Mugabe : It works, but not working for IE8, any alternate – Sep 11 '15 at 12:45
Hmmm that's weird. `column-count: 2` doesn't produce the expected output for me. Perhaps attach a working fiddle? – UltraSonja Sep 11 '15 at 13:00

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

Following this answer https://stackoverflow.com/a/24924657/2983435, made some adjustments to your CSS:

ul {
    list-style-type: disc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
}
.list{
    border:1px solid red;
}

edited May 23 '17 at 12:06

Community

1
1

answered Sep 11 '15 at 12:53

Ariel

1,507
2
20
28

score 0 · Answer 3 · answered Sep 11 '15 at 13:03

0

ul {
   list-style:none;
    -webkit-columns: 2;
   }
.list{
    border:1px solid red;
}

only -webkit-columns: 2; is mostly required for vertical order list items

answered Sep 11 '15 at 13:03

Neeraj Kumar

3,851
2
19
41

It should support IE8 – Sep 11 '15 at 13:19

score 0 · Answer 4 · answered Sep 11 '15 at 13:46

Unfortunately, the biggest blocker to any solution given to you (i.e. column and flexbox ) is that you need the solution to be working on IE8. There is no silver bullet when trying to support browsers that old unfortunately.

I've provided some CSS for you to add a flexbox solution for more current browsers (Demo), but you'll need to build in a fallback for IE8 that uses either a display: block or display: table since Flexbox is not supported on IE9 or IE8.

ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 150px;
}

li {
  height: 50px;
}

Hope that helps a little bit.

How to display the list in a vertical way order using css

4 Answers4