Question

我正在使用基本HTML设计Q＆amp; A页面。

这就是我的网页的样子。 JSFIDDLE

我需要添加＆＃39; A＆＃39;回答每一个问题。有些答案包含多个段落，因此＆＃39; A＆＃39;必须添加到答案的第一段＆amp;它应与＆＃39; Q＆＃39;。

的对齐方式相同

这里有一个例子：Link

HTML

<h4>Frequently Asked Questions </h4>
<div >
    <ul>
        <li style="color: blue">
            Question heading 1
            <p style="color: #000000">
              answer para  1
            </p>
            <p style="color: #000000">
               answer para 2
            </p>
        </li>

        <li style="color: blue">
           Question heading 2
            <p style="color: #000000">
              answer para  1
            </p>
        </li>

        <li style="color: blue">
            Question heading 3
            <p style="color: #000000">
                answer para  1
            </p>
        </li>

        <li style="color: blue">
            Question heading 4
           <p style="color: #000000">
              answer para  1
           </p>
        </li>
    </ul>
</div>

风格

<style type="text/css">
    ol {
        margin-left: 0;
        padding-left: 0;
    }
    li {
        display: block;
        margin-bottom: .5em;
        margin-left: 0em;
    }
    li:before {
        display: inline-block;
        content: "Q:";
        width: 2em;
        margin-left: -2em;
    }
</style>

Answer 1

对您的代码进行了更改。请找到更新的CSS JSFIDDLE

Answer 2

 li p:first-child:before {
        display: inline-block;
        content: "A:";
        width: 2em;
        margin-left: -2em;
    }

使用此css

Answer 3

我添加了＆＃39; A＆＃39;为每个答案的第一段，并为自我满足做了很少的美化：）

最佳做法是删除内联样式并添加外部CSS（问题和答案文字颜色）。

HTML

<h4>Frequently Asked Questions </h4>
<div>
    <ul>
        <li>Question heading 1
         <p>answer para  1</p>
         <p>answer para 2</p>
        </li>

        <li>Question heading 2
          <p>answer para  1</p>
        </li>

        <li>Question heading 3
          <p>answer para  1</p>
        </li>

    </ul>
</div>

CSS

*{
    font-family: Arial;
    font-size: 12px;
}
ol {
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 0em;
    color: #626F74;
    font-weight: bold;
}
li:before {
    display: inline-block;
    content: "Q:";
    width: 2em;
    margin-left: -2em;
}
li p{
    color: #000;
}
li p:first-child:before {
    display: inline-block;
    content: "A:";
    width: 2em;
    margin-left: -2em;
}

UPDATED JSFIDDLE

如何使用CSS自定义HTML中的无序列表项

3 个答案: