如何使CSS段落編號在滾動框中工作？

Question

為了解決工作中的問題，我一直在學習如何使用CSS進行段落編號。 到目前為止，我對獨立文本段落的結果感到滿意。 但是，我的要求是在帶有垂直滾動條的滾動框中執行相同的操作。

如您在此處看到的： http : //jsfiddle.net/Lceewqj3/3/ ，通過從段落編號中刪除絕對位置並添加右頁邊距，我已經接近了，但在將段落從左開始時仍然存在問題邊緣以正確定位。 我的解決方案必須對兩位數的段落編號和單個數字都正確工作，因此固定的右邊距不起作用，如您向下滾動到段落10所看到的那樣。我嘗試添加width屬性，但這沒有用要么。

請注意，修改現有的passage-scrolling樣式不是我可以隨意做的，因此，我需要一個僅涉及操縱chapter樣式和/或page樣式的解決方案。

這是小提琴的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;
  }