Skip to main content

Posts

Showing posts with the label multicolumn lists

Four column unnumbered list using CSS

In a blog I wanted to do a four column unnumbered list, I looked around and found a few sites showing you a method: alistapart.com csswizardry.com Summary of CSS Essentially you want an inline list that has a width, so first define the UL, with a margin, then make the list items inline and have  a width item1.1 item1.2 item1.3 item1.4 item2.1 item2.2 item2.3 item2.4 item3.1 item 3.2 etc Code <ul style="margin-bottom: 20px; overflow: hidden; width: 100%;"> <li style="border-bottom: 1px solid #ccc; display: inline; float: left; line-height: 1.5em; width: 25%;">item1.1</li> <li style="border-bottom: 1px solid #ccc; display: inline; float: left; line-height: 1.5em; width: 25%;">item1.2</li> <li style="border-bottom: 1px solid #ccc; display: inline; float: left; line-height: 1.5em; width: 25%;">item1.3</li> <li style="border-bottom: 1px solid #ccc; display: inline; float: left; ...