Question

我有一个定义列表。我的<dt>和<dd>在CSS中设置为display: inline-block;。我想避免在<dd>元素之前和<dt>元素之后的换行符。我该怎么办？

我的列表看起来像这样，在term3之后有一个换行符：

term1：def1; term2：def2; term3：
DEF3;

我希望它看起来像这样（换行符应该出现在term3之前：

term1：def1; term2：def2;
term3：def3;

Answer 1

单列（有效HTML）：

<style type="text/css">
    dt, dd { display: inline-block; float: left; }
    dt { clear: left; }
</style>

<dl>
    <dt>term1</dt><dd>def1</dd>
    <dt>term2</dt><dd>def2</dd>
    <dt>term3</dt><dd>def3</dd>
</dl>

No-Wrap <span>（无效的HTML）：

<style type="text/css">
    dt, dd { display: inline-block; }
    span { white-space: nowrap; }
</style>

<dl>
    <span><dt>term1</dt><dd>def1</dd></span>
    <span><dt>term2</dt><dd>def2</dd></span>
    <span><dt>term3</dt><dd>def3</dd></span>
</dl>

Answer 2

对我来说，只需在同一行上指定dt和dd以及inline显示样式，就像这样：

<style type="text/css">
    dt, dd { display: inline; }
</style>

<dl>
    <dt>term1</dt><dd>def1</dd>
    <dt>term2</dt><dd>def2</dd>
    <dt>term3</dt><dd>def3</dd>
</dl>

而不是我之前的情况：

<style type="text/css">
    dt, dd { display: inline; }
</style>

<dl>
    <dt>term1
    <dd>def1
    <dt>term2
    <dd>def2
    <dt>term3
    <dd>def3
</dl>

在动态调整浏览器窗口大小时，

似乎工作正常 - 我从未在dt和dd dd和dt之间看到它断开。

Answer 3

我能想到的唯一方法是设置每个元素的宽度，以便每行都有一个可预测的断点。

如何在元素之前或之后避免换行？

3 个答案: