我想創(chuàng)建一個(gè)描述列表，其中每個(gè)術(shù)語(yǔ)和描述對(duì)都出現(xiàn)在一行中，但這些“行”帶有懸掛縮進(jìn)，以防它們換行。這是我想要的視覺效果，但使用p元素代替：p { margin: 0 0 0 2em; text-indent: -2em}<p><b>H:</b> Himenaeos</p><p><b>U:</b> Ullamcorper</p><p><b>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</b> Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</p><p><b>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</b> Vestibulum risus a tortor integer</p><p><b>Q:</b> Quisque</p>到目前為止，我已經(jīng)成功地內(nèi)嵌顯示了每一對(duì)，但懸掛縮進(jìn)的運(yùn)氣不佳。我當(dāng)前的代碼：dt,dd { display: inline;}dt { font-weight: bold;}dd { margin: 0; padding: 0}dt::before { content: ""; display: block;}<dl> <dt>H:</dt> <dd>Himenaeos</dd> <dt>U:</dt> <dd>Ullamcorper</dd> <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt> <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd> <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt> <dd>Vestibulum risus a tortor integer</dd> <dt>Q:</dt> <dd>Quisque</dd></dl>
2 回答
繁星淼淼
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊
您可以考慮使用正填充來(lái)糾正負(fù)邊距，您將獲得相同的效果：
dl {
padding-left:2em;
}
dt,
dd {
display: inline;
margin:0;
padding:0;
}
dt {
margin-left:-2em;
}
dd:after {
content:"";
display:block;
}
dt {
font-weight: bold;
}
<dl>
<dt>H:</dt>
<dd>Himenaeos</dd>
<dt>U:</dt>
<dd>Ullamcorper</dd>
<dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
<dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
<dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
<dd>Vestibulum risus a tortor integer</dd>
<dt>Q:</dt>
<dd>Quisque</dd>
</dl>
米琪卡哇伊
TA貢獻(xiàn)1998條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以將定義列表項(xiàng)包裝在 div 中，并用較少的文本重置 div 中那些 dd 的邊距。
dt,
dd {
display: inline-block;
}
dt {
font-weight: bold;
}
div:nth-of-type(1) dd,
div:nth-of-type(2) dd,
div:nth-of-type(5) dd {
margin: 0;
}
<dl>
<div>
<dt>H:</dt>
<dd>Himenaeos</dd>
</div>
<div>
<dt>U:</dt>
<dd>Ullamcorper</dd>
</div>
<div>
<dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>
<dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>
</div>
<div>
<dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>
<dd>Vestibulum risus a tortor integer</dd>
</div>
<div>
<dt>Q:</dt>
<dd>Quisque</dd>
</div>
</dl>
- 2 回答
- 0 關(guān)注
- 118 瀏覽
添加回答
舉報(bào)
0/150
提交
取消