Have 3 columns with 4 li

Question

I have an unordered list (ul), and I'm trying to make 3 columns. When I have 4 li's it only shows 2 columns. How can I make it have 3 columns with 4 li's?

Also, I want the li to go from left to right, not up to down, like this:

How it is:

1     3     5

2     4

I want it like this:

1     2     3

4     5

How can I make it show 3 columns when I have 4 li? And how can I make it show left to right?

Here is what I have so far:

HTML

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

ul {
    background-color:yellow;
    -webkit-columns:3;
    -moz-columns:3;
    columns:3;
}

Here's the JSFiddle

Answer 1

You can do this by floating block level elements and setting a width of 100%/3 on them, thereby creating three column layout. The browser will render the first three elements in row 1, the next three in row 2, the next three in row 3, etc...

HTML

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

ul 
{
    background-color:yellow;
    overflow: hidden;
    margin: 0; padding: 0;
}

ul li 
{
    background: red;
    float: left;
    display: inline-block;
    width: calc(100%/3);
    margin: 0; padding: 0;
}

Fiddle

https://jsfiddle.net/wfnkLd6m/4/

Answer 2

li {
    width: calc(100%/3);
    float: left;
    background-color: yellow;
}

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

Something like this?