CODEWITHSUNDEEP
htmlcss
Amit Sharma
Amit Sharma

Reputation: 1988

displaying dt tag side by side instead of one below another

I want to display dt of HTML tag side by side instead of one below another 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

Upvotes: 0

Views: 2734

Answers (3)

Bazzz
Bazzz

Reputation: 26922

I like all the other answers as they are good, but I think mine is a lot simpler and doesn't require IE hacks:

dt {
    display: inline;
}

Upvotes: 1

rcravens
rcravens

Reputation: 8388

dl.Desktop dt{float:left;}

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

Note: there may be additional styling needed to get it just right.

Upvotes: 0

David Tang
David Tang

Reputation: 93684

You can either make them float left:

dt {
    float: left;
}

Or make them inline-block:

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

Why inline-block may be desirable.

Upvotes: 0

Related Questions