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

Started by Xhanch Studio, April 21, 2012, 10:57:21 AM

previous topic - next topic
Go Down

Xhanch Studio

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

HTML codes:
Code Select
<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:
Code Select
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 */
Best Regards,
Susanto B.Sc
----------------------------------------------------------------------------
Web development services, WordPress plugin and theme development, PSD to XHTML conversion - http://xhanch.com
Read free manga online - http://authrone.com

Go Up