CODEWITHSUNDEEP
htmlcss
joshefin
joshefin

Reputation: 424

How to layout list items in groups

Let's say we have a html list like this:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
    <li>10</li>
</ul>

How to, using css and/or java script, make a browser show it like this (in groups of four, with some margin between the groups):

1 2    5 6    9 10
3 4    7 8

Upvotes: 4

Views: 530

Answers (5)

Pat Wangrungarun
Pat Wangrungarun

Reputation: 526

Alternative way using jQuery here .. (live demo)

var ul = $('ul'),
    lis = $('ul li');

lis.each(function (index) {
  if(index % 4 === 0) {
    ul.append($('<ul />'));
  }
  ul.find('ul').eq(~~(index / 4)).append($(this));
});

And CSS

ul ul {
  float: left;
  width: 50px;
  margin-right: 30px;
}
ul li {
  list-style-type: none;
  float: left;
  width: 50%;
}

Upvotes: 0

Neysor
Neysor

Reputation: 3909

You can try it by replacing the "ul" with tables, that fits your needs. SEE DEMO

You only have to customize this demo for you needs with css or different html tags.

JavaScript

$(function(){
    $("ul").each(function(){
        var oh = "<table><tr>";
        for(i=0;i<this.children.length;i++){
            oh += "<td>"+this.children[i].innerHTML+"</td>";
            if(i%2==1){
                oh+="</tr>";
                if(i%4==3){
                    oh+="</table><table><tr>";
                } else {
                    oh+="<tr>";
                }
            }
        }
        oh += "</tr></table>";
        this.outerHTML = oh;
    });
});

EDIT

There is also the possibility of CSS column-count, but this does not work in every browser. See WhenCanIuse. So mine is a fall-back version which should work in much more browsers.

Upvotes: 0

sandeep
sandeep

Reputation: 92803

you can use css3 column-count property for this:

Write like this:

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-width:20px;
    -moz-column-width:20px;
}
li {
    display:inline;
}
div{
    width:120px;
}

Check this http://jsfiddle.net/rJTGJ/2/

Upvotes: 4

David Thomas
David Thomas

Reputation: 253358

Just use column-count, float and width after wrapping the ul in a parent element to which the column-count rule can be applied:

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
li {
    float: left;
    width: 50%;
}​

Adjusted HTML:

<div class="colWrap">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>​

JS Fiddle demo.

References:

Upvotes: 6

Tirtha
Tirtha

Reputation: 872

use html tables

<table>
 <tr>
  <td></td>
 </tr>
</table>

And change the border characteristics of the table to hide it. hope this helps.

Upvotes: -1

Related Questions