dl and span tag in one line

Question

I have the code like this

<div>
<span>This is text</span>
<span>
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</span>
</div>

The output I want is in one line like this.

This is text {Please Select Category dropdownbox}

Currently, the problem i got is, it became two line.

How can i get it into one line ? Please kindly help me with it. Thanks.

Answer 1

Something like this should do it.. in your CSS stylesheet, add:

dt {width: 100px; text-align:right; float:left; clear:left; line-height: 22px; padding-right: 3px;}
dd {margin-left: 100px; line-height: 22px;}

Hope this helps!

Answer 2

In the CSS:

dl, dd, dt { display: inline; }

But you probably won't like the result. Why do you use a definition list anyway? Just use spans and the UL.

Answer 3

Change the second line of your code:

<span style="float: left">This is text</span>

Edit:

Change your code to:

<div style="float: left;">This is text</div>
<div style="margin-left: 80px;">
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</div>

Answer 4

There is always the possibility to use a table.

<div>
<table><tr><td  valign=top >
<span><dl>This is text</span>
</td><td width=15 >&nbsp;</td><td   valign=top  >
<span>
    <dl>
        <dt><a href="#"><span>Please select category</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
                <li><a href="#">France<span class="value">Cat2</span></a></li>
            </ul>
        </dd>
    </dl>
</span>
</td></tr></table>
</div>

Hey, I know it's not best looking solution, but it does the job.

Answer 5

Why not use a label element:

<div>
    <label>This is text</label>
    <dl>
     <dt><a href="#"><span>Please select category</span></a></dt>
     <dd>
      <ul>
       <li><a href="#">Brazil<span class="value">Cat1</span></a></li>
       <li><a href="#">France<span class="value">Cat2</span></a></li>
      </ul>
     </dd>
    </dl>
</div>

along with

label,dl
{
    display:inline-block;
}