Question

我想让我的常见问题解答Q＆amp; 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;
}

Answer 2

CSS

ul li {
    list-style: none;
    margin-left: 1.25rem;
    text-indent: -1.25rem;
}

JSFiddle Demo

Answer 3

我认为在这种情况下定义列表可能更合适：

<dl class="faq">
    <dt>the question.</dt>
    <dd>the answer
        <ol>
            <li>if answer contains a list, first item in list.</li>
            <li>if answer contains a list, second item in list.</li>
        </ol>
    </dd>
</dl>

然后，您可以使用生成的内容设置样式以标记问题和答案，并根据需要调整边距：

.faq {margin-left: 1.5em;}
.faq dd {margin-top: 1em; margin-left: 0;}
.faq dt:before {
    content: "Q. ";
    margin-left: -1.25em;
}
.faq dd:before {
    content: "A. ";
    margin-left: -1.25em;
}

这里的演示：http://jsfiddle.net/ZsLpL/

使用css将文本缩进为有序列表

3 个答案:

Demo Fiddle