I want to show list items as 2 or more columns (dynamic alignment)

Question

I am able to do the list using float:left; like this

But

Answer 1

The CSS:

ul.parent li {
  float: left;
}

Using jquery:

$('.parent>li:odd').css("clear", "both");

<ul class="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Please take a look at http://api.jquery.com/even-selector/ and http://api.jquery.com/odd-selector/

Answer 2

For this, you can use the column-count property:

div#multicolumn1 {
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 3;
    column-gap: 50%;
}

Check this jsFiddle.

Note: It does not work in IE.

For IE, you can use this JavaScript: CSS3 - Multi Column Layout Demonstration

Answer 3

This works just fine cross-browser, no JS required. You just limit the width of your columns.

<style>
    ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;}
    ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;}
</style>

<ul class="col">
    <li>1(li)</li>
    <li>2(li)</li>
    <li>3(li)</li>
    <li>4(li)</li>
    <li>5(li)</li>
</ul>
<ul class="col">
    <li>6(li)</li>
    <li>7(li)</li>
    <li>8(li)</li>
    <li>9(li)</li>
    <li>10(li)</li>
</ul>

If you are stuck with them all in one UL on page load, you can split them out with jQuery to create the same results:

<script>
$(function(){ //on document ready
    var perCol = 5;
    var $ul = $('ul.col');
    var rows = Math.ceil($ul.find('li').length/perCol);
    for(var i=1;i<=rows;i++){
        $ul.after('<ul class="col"></ul>');
    }
    for(var i=1;i<=rows;i++){
        $ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')');
    }
    $ul.remove();
});
</script>