inline dl, dt, dd...

SooTyLaD · 25 May 2007 at 12:52

in css, how do i get the dd to display inline with the dt?

for example:

phone: 01234 987654

is it even possible?

Conrad11 · 25 May 2007 at 14:03

floats?

Not actually tried, just a guess.

This seems to work in IE7 and FF2

Code:

<dl id="contact">
	<dt>phone:</dt>
	<dd>01234 987654</dd>
</dl>

Code:

#contact dt{font-weight:bold;float:left}
#contact dd{text-indent:10px;margin:0}

Augmented · 25 May 2007 at 14:09

display: inline;, but should a telephone number really be inside a definition list?

Conrad11 · 25 May 2007 at 14:12

Augmented said:
display: inline;, but should a telephone number really be inside a definition list?

You have to have the float:left for it to work

...but yeah that's what I thought with the use of the definition list, but I can see why someone would use it for that, makes the code look "cleaner" even if it is improper use.

Augmented · 25 May 2007 at 14:15

Shouldn't need to float it, just ensure both elements are changed to inline elements:

Code:

#contact dd, #contact dt {
display:inline; 
margin-left: 0;}

floating an element makes it block-level. So display: inline and float: left are conflicting properties.

Conrad11 · 25 May 2007 at 14:35

Augmented said:
floating an element makes it block-level. So display: inline and float: left are conflicting properties.

I understand this.

But my method was taking into account if there is more than one definition in the list, because your method would surely be flawed then? But equally your method is more "appropriate" if there is just one definition.

Augmented · 25 May 2007 at 14:55

Conrad11 said:
But my method was taking into account if there is more than one definition in the list, because your method would surely be flawed then?

Yep, that's a good point

.

psyr33n · 25 May 2007 at 16:53

Yeah, generally floating the DT left works.

Check out the stylings here, it may prove useful: http://maxdesign.com.au/presentation/definition/index.htm