开发者

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


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;
}


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜