Forum
Notifications
Clear all
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