Question

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

正如你在这里看到的那样：http://jsfiddle.net/Lceewqj3/3/，我已经接近了从段落编号中删除绝对定位，并添加了一个右边距，但我仍然遇到一个问题，让段落从左边缘开始定位正确。我的解决方案必须正确地处理两位数的段号和单个，所以固定的右边距不起作用，你可以看到通过向下滚动到第10段。我尝试添加一个宽度属性，但是没有＃＆＃ 39;工作要么。

请注意，修改现有的passage-scrolling样式是我不能自由做的事情，所以我需要一个只涉及操纵chapter和/或page样式的解决方案。 / p>

这是小提琴的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段落编号在滚动框中工作？

1 个答案: