Display definition term and description inline

Question

I am using a definition list for some elements on the page and need them to display inline, e.g.: they normally look like:

<def term>
        <def desc>
        <def desc>

and I need them to look like (note the multiple DD's):

<def term> <def desc> <def desc>
<def term> <def desc> <def desc>
<def term> <def desc> <def desc>

I can get them to work fine using floats in moz but no matter what I try they will not work in IE, I typically get something like:

<def term> <def desc> <def desc> <def desc> <def desc> <def desc> <def desc>
<def term>
<def term>

Has anyone found a solution to this problem, I would really like to avoid adding extra markup where possible, but short of changing them to an unordered list im out of ideas :(

Thanks in advance

Answer 1

default stylesheet

dt,dd { float: left;}
dd + dt { clear: left; }

ie 6 & 7 stylesheet:

dt { float: none;} dd { position: relative; top: -19px; /depending on your line-height/ }

ie6

http://code.google.com/p/ie7-js/

Hope that helps.

Answer 2

Have you tried clearing the float in the dt's? Like this:

dt { clear: left; }
dd { float: left; }

---

Edit: Here's a cross-browser solution that validates:

dd,dt{ display: inline; }

<dl>
 <dt>1</dt><dd>1.1</dd><dd>1.2<br/></dd>
 <dt>2</dt><dd>2.1</dd><dd>2.2<br/></dd>
</dl>

However, as you can see, that br is pretty nasty and non-semantic. Hopefully someone else can come up with a better solution. :)

Answer 3

just give them all layout , most simple way is to use CSS property .yourstuff { zoom: 1; }

Answer 4

This works (admittedly only tested on FF 3.x.x and Opera 9.x, both on Ubuntu 8.04):

CSS:

p {
    display: block;
}
dl {
    display: block;
    margin: 0;
}
dt {
    display: block;
    width: 7em;
    border-right: 1px solid #ccc;
    margin: 0;
}
dd {
    display: none;
    margin: 0;
    position: relative;
    /* 'position: absolute' would probably work better, 
        and lose the line break left by the 'position: relative;' */
    top: -1em;
    left: 8em;
}
dt:hover + dd, dt:hover + dd + dd {
   /* Couldn't find a way to target all sibling 
      dds of a dt without the + operator (and listing all of them),
      but it works, albeit kludgy */
    display: inline;
}
dd:after {
    content:"; ";
}
dd:last-child:after {
    content:"";
}

HTML:

<div id="content">
    <dl>
        <dt>first dt</dt><dd>first dt's first dd</dd><dd>first dt's second</dd>
        <dt>second dt</dt><dd>second dt's first dd</dd><dd>second dt's second</dd>
        <dt>third dt</dt><dd>third dt's third dd</dd><dd>third dt's second</dd>
    </dl>
</div>

Link to working example, tested under FF 3 and Opera 9.x:
http://www.davidrhysthomas.co.uk/so/dls.html

Answer 5

Note: you have to avoid spaces between the DD elements for this work work correctly.

No need for hacks for IE8+:

dd,
dt{
    display: inline;
    margin: 0;
}
dd:before {
    content: ' '; /* space them */
}
dt:before { /* insert line break before <dt> */
    content:"\A";
    white-space:pre;
}
dt:first-child:before { /* disable line break before the first <dt> */
    content: none;
}

If you don't need to support IE8, skip the 4th CSS rule and just use this selector for the 3rd one: dt:not(:first-child):before

The result should be something like this: (demo)

DT DD DD
DT DD DD

If you want to be real cool, you can replace the 2nd rule with this:

dd + dd:before {
    content: ', '; /* add comma between definitions */
}

dt:after {
    content: ':';
}

The result should be something like this: (demo)

DT: DD, DD
DT: DD, DD