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

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

我的名单看起来是这样的，有TERM3后换行：

字词1：DEF1; term2：def2; term3：
def3;

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

字词1：DEF1;词条2：DEF2;
TERM3：DEF3;

来源

2011-01-13 Almino Melo

的唯一途径我认为可以这样做，就是设置每个元素的宽度，以便每行都有可预测的断点。

来源

2011-01-13 19:37:26 Jeff

单列（有效的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>

无包裹<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>

来源

2011-01-13 19:41:39 drudge

使用`span`会使html无效，就像我使用`div`的解决方案一样。 – GolezTrol 2011-01-13 20:00:06

对我来说，它的工作将在同一行与inline显示风格只是指定dt和dd在一起，就像这样：

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

似乎正常工作时，动态调整浏览器窗口 - 我从来没有看到的只是dd和dt之间的dt和dd之间打破它。

来源

2013-12-05 09:42:13 Zitrax

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

回答

相关问题