Html dl和span标记在一行中

我有这样的代码

<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>

这是文本

我想要的输出是这样的一行

这是文本{请选择类别下拉框}

现在，我遇到的问题是，它变成了两条线

---

我怎样才能把它排成一行？请帮忙。谢谢。

像这样的东西应该可以。。在CSS样式表中，添加：

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

希望这有帮助

在CSS中：

dl, dd, dt { display: inline; }

---

但你可能不会喜欢这个结果。为什么要使用定义列表呢？只需使用span和

UL

更改代码的第二行：

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

这是文本

编辑：

将代码更改为：

<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>

这是文本

始终可以使用表格

<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>

这是文本

---

嘿，我知道这不是最好的解决方案，但它确实起到了作用。

为什么不使用

标签

元素：

<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>

---

在这里设置

max width

style属性可能会有所帮助。将其设置为可以容纳整个句子的值。

这有效。但输出是这样的，我想在这是文本和选择类别之间留有空间，我该怎么做？非常感谢您的帮助。这是文本。它只是移动选择类别文本，而不是整个定义列表。它不起作用。输出是这样的你能帮我解决吗？谢谢。抱歉，我误解了这个问题。现在这里还有一些其他的答案可以使用，请检查。是的，实际上，我想使用这个下拉框，这就是为什么它使用定义列表。Span元素可能不包含dl元素，浏览器可能会在dl启动时关闭Span来更正错误。我强烈建议您先修复标记结构（），然后再担心它的表示。太好了，我完全忘记了这个事实！谢谢我现在让它工作了！因为label元素描述表单控件的用途，而这里没有表单控件。（当然，也没有定义列表…）实际上，Isaveit说他/她使用的是表单控件，尽管是jquery创建的。这就是他/她所说的：/me戳了戳演示。多么令人厌恶的难以接近的混乱。

label,dl
{
    display:inline-block;
}