Geek Answers Handbook

Listing definitions using DT and DD on the same line

I would like to show several rows of data, each of which has a header and some data in the same row. This question was definitely answered on SO (i.e., How is the style of dt and dd so that they are on the same line? ), However it does not seem to work for me. The following seems to work, unless the DD has no content in which a corrects it. It interests me IE7 +. How am I doing this right? Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style> dl {width: 395px; font-size:12px} dd,dt {padding-top:5px;padding-bottom:5px;} dt {float:left; padding-right: 5px; font-weight: bolder;} /* dd {padding-left: 5px;} Does not work */ </style> </head> <body> <dl> <dt>DT Element 1:</dt><dd>DD Elem 1</dd> <dt>DT Second Element:</dt><dd>DD Element Two</dd> <dt>DT Elem 3:</dt><dd></dd> <dt>DT Element 4:</dt><dd>DD Elem 4</dd> <dt>DT Fifth Element:</dt><dd>&nbsp;</dd> <dt>DT Elem 6:</dt><dd>DD Element Six</dd> </dl> </body> </html>
+4
source share
2 answers

Your problem is that an empty dd not created and leaves an empty space (height: 0px).

If you can, yes, just put nbsp; inside any empty element. This is the simplest solution that will work in a cross browser.

A simple, clean css fix would look like this:

 dd:after {content:"."}

But he adds a point after each definition ...

You can also just set the minimum height on your dd:

 dt {clear: left;} dt, dd {min-height:1.5em;}

(dt and dd min-height should be the same!)

demo

... You will probably run into a problem if your dt height is not regular (if it is once on two lines, for example).

+6
source

It works on IE7 +, conforms to the standard and allows different heights.

 <style> dt { float: left; clear: left; width: 100px; padding: 5px 0; margin:0; } dd { float: left; width: 200px; padding: 5px 0; margin:0; } .cf:after { content:''; display:table; clear:both; } </style> <dl class="cf"> <dt>A</dt> <dd>Apple</dd> <dt>B</dt> <dd>Banana<br>Bread<br>Bun</dd> <dt>C</dt> <dd>Cinnamon</dd> </dl>

See JSFiddle .

0
source

More articles:


All Articles