Display dt tag side by side instead of one below the other

Question

I want to display dtan HTML tag side by side, and not one below the other For example: -

<dl class='Desktop'>
  <dt class='first'>first</dt>
  <dt class='Second'>second</dt>
  <dt class='third'>third</dt>
</dl>

Output: first second third

0

PHP Developer Feb 24 '11 at 13:31

3 answers

Bazzz · Answer 1 · 2011-02-24T13:43:44+0000

I like all the other answers as they are good, but I think mine is much simpler and does not require IE hacks:

dt {
    display: inline;
}

rcravens · Answer 2 · 2011-02-24T13:33:32+0000

dl.Desktop dt{float:left;}

Get them side by side. Here is an example: http://jsfiddle.net/zD8bs/ .

Note: Additional style may be required to work properly.

David tang · Answer 3 · 2011-02-24T13:34:32+0000

You can either make them float to the left:

dt {
    float: left;
}

Or make them an inline block:

dt {
    display: inline-block;
    zoom: 1; /* IE hack */
    *display: inline; /* IE hack */
}