Question

我正在开发一个有问题的网络应用程序，我必须在问题旁边放置问题编号格式应该是这样的

Q10. - - - - - - - -
     - - - - - - - -
     - - - - - - - -

我试图让它成为有序列表，但这不起作用，因为我必须动态地放置问号

.question {
  margin-left: 3em;
  position: relative;
}
.question::before {
  position: absolute;
  left: 0;
  top: 0;
}

Answer 1

看起来很适合CSS counters。看看即使使用自定义初始值，您也可以使用它：

＆＃13;

.questions {
    counter-reset: section;
    list-style-type: none;
}
.questions li:before {
    counter-increment: section;
    content: "Q" counter(section) ".";
    position: absolute;
    margin-left: -30px;
}

＆＃13;

<ol class="questions" style="counter-reset: section 3">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam perspiciatis tempore velit voluptatibus cumque ex necessitatibus officiis excepturi nisi neque possimus dolorum nostrum voluptate nesciunt nobis iusto porro laboriosam!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nulla saepe dicta tedebitis! Aliquam ad similique enim!</li>
    <li>Question #3</li>
    <li>Question #4</li>
</ol>

＆＃13;

请注意，我已将style属性设置在ol上，因为您＆＃34;必须动态地放置问题编号＆＃34; 。

Answer 2

关于@ dfsq的答案，我认为更合适的选择，尽管使用类似的结构将是data-attributes的使用。

＆＃13;

.question {
  margin-left: 3em;
  position: relative;
}
.question::before {
  content: "Q" attr(data-question);
  position: absolute;
  left: 0;
  top: 0;
  margin-left: -2em;
}

＆＃13;

<p class="question" data-question="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sit iste dolore commodi facere atque ab aut ratione repudiandae assumenda porro animi autem molestiae. Optio eaque perferendis quod inventore eius nobis aspernatur facilis quo voluptate.</p>

<p class="question" data-question="11">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sit iste dolore commodi facere atque ab aut ratione repudiandae assumenda porro animi autem molestiae. Optio eaque perferendis quod inventore eius nobis aspernatur facilis quo voluptate.</p>

＆＃13;

这与其他答案类似，因为它确实依赖于手册＆＃39;值存在于HTML中，但它并不依赖于<style>标记。非常相似的方法。

JS是否更容易访问数据属性当然是有争议的，但我把它作为另一种选择。

将序列号放在旁边

2 个答案: