css column list is unordered

Question

I have a ul li, organiz in css column. Otherwise the order of my li is totally messsed up.

I would need to have in that oder:

1   2
3   4
5   6
7   8

Here is the CSS I'm using:

ul.pl-bxslider.pl-box-car {-moz-column-count: 2;
-moz-column-gap: 2.5em;
-webkit-column-count: 2;
-webkit-column-gap: 2.5em;
 column-count: 2;
 column-gap: 2.5em;

I tried to add:

    -webkit-column-break-inside: avoid;

But no luck,

i also tried to add a display:inline-block to the li element and nothing . . .

Any help would be so amazing :)

Thank you for your time !

Answer 1

You should use display: inline-block; , also set vertical-align: top; for li and you need to set the width for ul and li. for example:

ul {
  width: 500px;
}
li {
  display: inline-block;
  vertical-align: top;
  width: 250px;
}

Could be in percents.

Answer 2

According my previous comment - width of the li should 50%, not 100% like you set, so in yours case:

 ul.pl-bxslider.pl-box-car li {
   width: 50% !important;
   display: inline-block;
   vertical-align:top;
 }

ul.pl-bxslider.pl-box-car {
  width:100%;
}