如何在元素之前或之後避免換行符？

我有一個定義列表。我的<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

如何在元素之前或之後避免換行符？

回答

相關問題