我想让我的 FAQ Q & A 像有序列表一样扁平化,有什么想法可以实现吗
http://i57.tinypic.com/2uff5uq.jpg
<div class="col-left">
<h3><strong>CAPTION</strong></h3>
<ul>
<li>Q: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
<li>A: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
<li>Q: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
<li>A: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.:</li>
</ul>
<ol start="1">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.!</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
<li>Anda akan diminta untuk melengkapi Informasi Tagihan lalu pilih Jasa Pengiriman yang Anda inginkan.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</li>
</ol>
</div>
谢谢
最佳答案
是这样的吗?
Demo Fiddle
HTML
<ul>
<li>Question</li>
<li>Answer
<ol>
<li>Answer 1</li>
<li>Answer 2</li>
<li>Answer 3</li>
</ol>
</li>
<ul>
CSS
ul {
list-style:none;
}
ul> li:nth-child(1):before {
content:'Q:';
}
ul> li:nth-child(2):before {
content:'A:';
}
li {
margin:20px 0;
}
关于html - 使用CSS使文本缩进像有序列表一样平坦,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23266850/