内联描述列表,带有悬挂缩进 [英] Inline description list with hanging indent
本文介绍了内联描述列表,带有悬挂缩进的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个描述列表,其中每个术语和描述对都显示在一行中,但是要让那些行"带有一个缩进的缩进,以防它们被换行.
I want to create a description list in which each term and description pair appear in one single line, but having those "lines" with a hanging indent in case they wrap.
这是我视觉上想要的,但是使用了 p
元素:
Here’s what I want visually but using p
elements instead:
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>
到目前为止,我已经设法在行中显示每对,但是在悬挂的缩进方面运气不佳.
So far I have managed to display each pair inline, but not luck with the hanging indent.
我当前的代码:
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>
推荐答案
您可以考虑使用正填充对负边距进行纠正,将会得到相同的效果:
You can consider negative margin that you rectify with a positive padding and you will get the same effect:
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>
这篇关于内联描述列表,带有悬挂缩进的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文