如何避免元素前后出现换行？

Question

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

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

term1：def1；term2：def2；term3：
def3；

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

term1：def1；term2：def2；
term3：def3；

- Almino Melo

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>

- drudge

---

使用 span 会使 HTML 失效，就像我使用 div 的解决方案一样。 - GolezTrol

@GolezTrol：是的，我将我的解决方案标记为无效HTML。你的实现和我的主要区别在于，我不在包装元素上使用float:left;。 :) - drudge

它没有按照我想要的方式工作。在<dd>后总是出现错误。 我希望它的行为像一行中的多个<span style="white-space: nowrap;">一样。 - Almino Melo

第一种解决方案是错误的，第二种似乎不太理想 - 我不想在每个使用中都包装一个<span>。 - Zitrax

顺便提一下，display: inline-block; float: left; 没有意义，因为 float: left; 会修改计算后的 display 值为 display: block;。 - Paul Kozlovitch

<span><dt>term1</dt><dd>def1</dd></span> 是最佳解决方案。为什么它是无效的HTML？ - tecdoc ukr net

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之间中断。

- Zitrax

Answer 3

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

- Jeff