html常见问题排序列表

Question

我正在创建一个有常见问题解答页面的网站，我想知道我是否可以制作“有序”列表，而不是显示

1. 问题....
   a）回答.....
2. 问题
   a）回答
   等等 这将使用：
完成

<ol>
  <li>question</li>
      <ol type="A">
        <li>answer</li>
      </ol>
  <li>question 2</li>
      <ol type="A">
        <li>answer 2</li>
        <ol>
</ol>

但有没有办法将数字（和字母）转换为问题和答案？或者我是否必须手动为每行键入问题和答案？ 我之前使用过JavaScript（和css），但从未使用Jquery。我更喜欢使用JavaScript。

编辑： 当我问这个问题时，我没有意识到dd和dt （描述列表）。最初我试图让一行说出问题然后在下一行回答，但答案@Timothy Jones说更有意义然后制作一个有序列表。

Answer 1

我会使用description list和CSS ::before选择器执行此操作：

<style type="text/css">
   dt::before {
       content: "Question: ";
   } 
   dd::before {
       content: "Answer: ";
   }
</style>
<dl>
  <dt>How would this look?</dt>
      <dd>it would look alright</dd>
  <dt>Alright, well how would this look?</dt>
      <dd>it would also look alright</dd>
</dl>

（根据需要添加样式）。我比javascript解决方案更喜欢这个，因为它在页面加载后不需要任何处理。

Answer 2

HTML

<ol class="faq">
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
    <li>
        <ol><li></li></ol>
    </li>
</ol>

CSS

ol { list-style-type: none; }

ol.faq  { padding-left: 0; }

ol.faq > li::before {
    content: "Question";
    color: red;
}

ol.faq > li > ol > li::before {
    content: "Answer";
    color: green;
}

DEMO：http://jsfiddle.net/wxocofu6/5/

请注意，在您的代码中，您的列表未正确嵌套。

Answer 3

一种方法是将图标样式设置为none，然后在CSS中使用before，设置文本。

.questions li { list-style-type: none; font-weight: bold; color: black; } 
.questions li:before { content: "Question"; padding-right: 5px; color: red; }
.answer li { list-style-type: none; font-weight: bold; color: black; } 
.answer li:before { content: "Answer"; padding-right: 5px; color: red; }

<ol class="questions">
  <li>Do you do the thing?</li>
      <ol class="answer">
        <li>Yes, we do.</li>
      </ol>
  <li>How do you do the thing?</li>
      <ol class="answer">
        <li>With lots of magic!</li>
        <ol>
</ol>