html - 使用CSS使文本缩进像有序列表一样平坦

Question

我想让我的 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>

谢谢

Answer 1

是这样的吗？

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;
}