我有一个定义列表。我的<dt>
和<dd>
在CSS中设置为display: inline-block;
。我想避免<dd>
元素之前和<dt>
元素之后的换行符。我该怎么做?如何在元素之前或之后避免换行符?
我的名单看起来是这样的,有TERM3后换行:
字词1:DEF1; term2:def2; term3:
def3;
我希望它看起来像这样(换行符TERM3之前应该出现:
字词1:DEF1;词条2:DEF2;
TERM3:DEF3;
我有一个定义列表。我的<dt>
和<dd>
在CSS中设置为display: inline-block;
。我想避免<dd>
元素之前和<dt>
元素之后的换行符。我该怎么做?如何在元素之前或之后避免换行符?
我的名单看起来是这样的,有TERM3后换行:
字词1:DEF1; term2:def2; term3:
def3;
我希望它看起来像这样(换行符TERM3之前应该出现:
字词1:DEF1;词条2:DEF2;
TERM3:DEF3;
的唯一途径我认为可以这样做,就是设置每个元素的宽度,以便每行都有可预测的断点。
单列(有效的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>
对我来说,它的工作将在同一行与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
之间打破它。
使用`span`会使html无效,就像我使用`div`的解决方案一样。 – GolezTrol 2011-01-13 20:00:06