Skip past the navigation links to the page content The Flying Cat Home

CSS Lists

The Definition List

This definitation list presents the entries in a horizontal fashion. But you have to be careful and keep the DT short or else the whole thing wraps like a traditional DT.

Example

Item 1
Aenean sem ipsum, fermentum nec, pellentesque a, tempor a, eros. Praesent purus. Nulla feugiat mi vitae urna. Mauris sed lorem.

Item 2 will be very long and need to wrap at some point so see what happens.
Phasellus risus. Quisque urna lectus, commodo ac, egestas eget, consectetuer eu, ipsum.

The Code

The CSS 

dl.list2 dt {
    float: left;
    clear: left;
    margin-right: 0.3em;
    font-weight: bold;
}
dl.list2 dd {
    margin-left: 5.5em;
}

The HTML

<dl class="list2">
<dt>Item 1
<dd>Aenean sem ipsum, fermentum nec, pellentesque a, tempor a, eros. Praesent purus. Nulla feugiat mi vitae urna. Mauris sed lorem.
<p>
<dt>Item 2
<dd>Phasellus risus. Quisque urna lectus, commodo ac, egestas eget, consectetuer eu, ipsum.
</dl>


1994 - 2010 Paula Edmiston

http://theflyingcat.com/handouts/html/css-lists.html
Last Edited: 01 Dec 05