I want my li's to be distributed over 2 rows like this:
item 1 item 3 item 5 item 7 item 9 ....
item 2 item 4 item 6 item 8 ......
My CSS is really bad so I have no clue on how to achieve this and can't find anything on this... I tried some stuff with even and odd items, but I can't figure out how to force even items below odd items.
You can use flexbox
to achieve this ordering. Support is pretty good (http://caniuse.com/#feat=flexbox) but you will need to provide fallbacks for older versions of IE.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
list-style-type: none;
margin: 0;
padding: 0;
width:200px;
}
li {
color: #000000;
height: 50px;
margin: 0;
padding: 0;
width: 100px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
You can use :nth-child
selector to select odd elements in that list items.
Here is an example:
CSS
ul {
position: relative;
white-space: nowrap;
}
li {
display: inline-block;
list-style-type: none;
padding: 0px 5px;
}
li:nth-child(2n) {
top: 100%;
position: absolute;
margin-left: -36px; /* Changes as per the width of the first element */
}
Working Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With