如何在滚动框中使用 css 段落编号？

Question

为了解决工作中的一个问题，我一直在学习如何使用css进行段落编号。到目前为止，我对独立文本段落的结果感到满意。但是，我的要求是在带有垂直滚动条的滚动框中执行相同的操作。

正如您在此处看到的：http://jsfiddle.net/Lceewqj3/3/，我已经通过从段落编号中删除绝对定位并添加右边距来接近，但我仍然无法将段落从左边缘开始到正确定位。我的解决方案必须适用于两位数的段落编号以及单个段落编号，因此固定的右边距不起作用，正如您向下滚动到第 10 段所看到的那样。我尝试添加宽度属性，但是也没用。

请注意，我不能随意修改现有的 passage-scrolling 样式，因此我需要一个仅涉及操纵 chapter and/or [=14= 的解决方案] 风格。

这是 fiddle 的 css：

  .chapter {
    counter-reset: paragraph;
    padding-left: 30px;
  }
  .page p {
    width: 75%;
  }
  .page p:before {
    //position: absolute;
    margin-left: -30px;
    margin-right: 14px;
    color: #000;
    font-style: italic;
    content: counter(paragraph);
    counter-increment: paragraph;
  }
  p {
    margin-top: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    line-height: 22px;
    font-weight: 400;
  }
  .passage-scrolling {
    padding: 0 5%;
    height: 340px;
    width: 89%;
    border: 2px solid #999;
    overflow-y: auto;
    margin-bottom: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }

Answer 1

工作人员帮我解决了这个问题。答案是简单地添加 float:left; 和 text-align:left; 并从 .page p:before 样式中删除右边距。在此处查看结果：http://jsfiddle.net/Lceewqj3/5/

这是正确运行的最终 css：

  .chapter {
       counter-reset: paragraph;
       padding-left: 30px;
  }
  .page p {
       width: 75%;
  }
  .page p:before {
       float: left;
       text-align: left;
       margin-left: -30px;
       font-style: italic;
       content: counter(paragraph);
       counter-increment: paragraph;
  }

如何在滚动框中使用 css 段落编号？

How do I get css paragraph numbering to work in a scroll box?

css

numbers

paragraph