Geek Answers Handbook

How to swim on the left with dd and dt

I have 2 labels and input fields that are enclosed in dt and dd tags. The label and input field are on separate lines, which gives me only 4 lines. I am trying to create it so that each input field is on the same line as its label, only 2 lines. I tried float left for #dd1dd and dd2dd , but this does not work. Can someone explain to me how to do this in the presence of dd and dt?

 <dt id="dt1"> <label for="dd1">DD1 Label:</label> </dt> <dd id="dd1dd"> <input name="dd1" id="dd1" value="" type="text"> </dd> <dt id="dt2"> <label for="dd2">DD2 Label:</label> </dt> <dd id="dd2dd"> <input name="dd2" id="dd2" value="" type="text"> </dd>
+4
source share
4 answers

they are block level elements, so you have to give them a width and put them to the left. otherwise they will occupy the entire width of the container.

 dt { width: 150px; clear:left } // clear to force it to the next line dd { width: 300px; } dt, dd { float:left; }
+5
source

You can use float and clear like this:

 #dd1dd, #dd2dd { float:left; clear:right; } #dt1, #dt2 { float:left; clear:left; }

here is a demo of http://www.jsfiddle.net/fWeec/

+2
source 
 <dt id="dt1" style='float:left'> <label for="dd1">DD1 Label:</label> </dt> <dd id="dd1dd" style='float:left'> <input name="dd1" id="dd1" value="" type="text"> </dd> <dt id="dt2" style='clear:both;float:left'> <label for="dd2">DD2 Label:</label> </dt> <dd id="dd2dd" style='float:left'> <input name="dd2" id="dd2" value="" type="text"> </dd>

float:left seems to work for me. Does the code described above act like you mean?

// EDIT

This also works if you don't like the float

 <dt id="dt1" style='display:inline-block'> <label for="dd1">DD1 Label:</label> </dt> <dd id="dd1dd" style='display:inline-block'> <input name="dd1" id="dd1" value="" type="text"> </dd> <br /> <dt id="dt2" style='display:inline-block'> <label for="dd2">DD2 Label:</label> </dt> <dd id="dd2dd" style='display:inline-block'> <input name="dd2" id="dd2" value="" type="text"> </dd>

By the way, these inline styles are for display purposes only, of course, you should use external sheets whenever possible.

0
source

A quick test in Firefox works well with float: left http://jsfiddle.net/aNvyG/

Any specific browser?

0
source

More articles:


All Articles