Question

我有这样的代码

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

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

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

目前，我遇到的问题是，它变成了两行。

我怎样才能把它变成一行？请帮助我。感谢。

Answer 1

在CSS中：

dl, dd, dt { display: inline; }

但你可能不喜欢这个结果。为什么你还要使用定义列表？只需使用跨度和UL。

Answer 2

这样的事情应该在你的CSS样式表中添加：

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

希望这有帮助！

Answer 3

更改代码的第二行：

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

Answer 4

也许设置max-width样式属性可以在这里提供帮助。将其设置为可以保存整个句子的值。

Answer 5

为什么不使用label元素：

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

与

一起

label,dl
{
    display:inline-block;
}

Answer 6

总是有可能使用表格。

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

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

dl和span标签在一行中

6 个答案: