XHanch Studio Log in | Register | Cart

Forum

[Tutorial] CSS code...
 
Notifications
Clear all

[Tutorial] CSS code to format ul and li into multiple columns list

1 Posts
1 Users
0 Likes
1,082 Views
XHanch
(@xhanch-alt)
Posts: 2105
Member Admin
Topic starter
 

This is a quick, simple tutorial/example to format <ul> and <li> into multiple columns list with CSS.

HTML codes:

<ul id="list" class="col2">
    <li>CSS</li>
    <li>XHTML</li>
    <li>Semantics</li>
    <li>Accessibility</li>
    <li>Usability</li>
    <li>Web Standards</li>
    <li>PHP</li>
    <li>Typography</li>
    <li>Grids</li>
    <li>CSS3</li>
    <li>HTML5</li>
    <li>UI</li>
</ul>

CSS codes:

ul{
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
    border-top:1px solid #ccc;
}

li{
    line-height:1.5em;
    border-bottom:1px solid #ccc;
    float:left;
    display:inline;
}

ul.col2 li{width:50%;} /* 2 col */
ul.col3 li{width:33.333%; } /* 3 col */
ul.col3 li{width:25%; } /* 4 col */
ul.col6 li{width:16.666%; } /* 6 col */
 
Posted : 21/04/2012 4:57 pm
Share:

× Close Menu