Question

我已经嵌套了一些.JSONEncoding.default并使用ol来设置列表项的样式。顶级counter(item)具有标准小数，而ol则使用ol ol > li:before

进行样式设置

当我这样做时，内部列表项具有奇怪的缩进，因为content: counter(item,lower-roman) ". ";具有不同的宽度（li:before，vs i.，ii.等。）< / p>

如何对齐内部列表的文本？

Answer 1

您可以在计数器上设置min-width，例如：

ol ol > li:before {
    content: counter(item, lower-roman) ". ";
    counter-increment: item;
    min-width: 20px; /* <--- */
    display: inline-block; /* <--- */
}

＆＃13;

ol {
  counter-reset: item;
}
ol > li {
  display: block;
  margin-bottom: 10px;
}
ol > li:before {
  content: counter(item) ". ";
  counter-increment: item;
}
ol ol {
  font-size: 1em;
}
ol ol > li:before {
  content: counter(item,lower-roman) ". ";
  counter-increment: item;
  min-width: 20px;
  display: inline-block;
}

＆＃13;

<ol>
  <li>This</li>
  <li>That</li>
  <li>
    A description of the list to follow:
    <ol>
      <li>text</li>
      <li>indented</li>
      <li>within</li>
    </ol>
  </li>
</ol>

＆＃13;

Answer 2

从here，到OP

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;    
}

li li {
  
    margin:0;
   
    
}

li li:before {
    content: counters(item, ".") " ";
    margin:0;
}

<ol>
    <li>Lorem ipsum.</li>
    <li>Excepteur sint occaecat cupidatat non proident:
        <ol>
            <li>sunt in culpa qui officia,</li>
            <li>deserunt mollit anim id est laborum.</li>
        </ol>
    </li>
    <li>Ut enim ad minim veniam.
        <ol>
            <li>Quis nostrud exercitation.</li>
            <li>Ullamco laboris nisi ut.
                <ol>
                    <li>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</li>
</ol>

将`counter（item）`对齐嵌套的`ol`

2 个答案: