开发者

displaying dt tag side by side instead of one below another

开发者 https://www.devze.com 2023-02-13 08:34 出处:网络
I want to display dt of HTML tag side by side instead of one below another For example:-- <dl class=\'Desktop\'>

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

精彩评论

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