Question

我来到这个小提琴，我希望2.1没有任何偏见。请看下面我从别人那里得到的一些代码，像魅力一样，但我不想要缩进！有任何想法吗？如果有人可以提供帮助，我们将不胜感激，谢谢！

代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您需要从CSS中删除display: table和display:table-cell。

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") ". ";
    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>

Answer 2

如果您希望所有文字保持在同一级别，我想出的唯一解决方法是将固定宽度设置为li:before

请参阅代码段＆gt;

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table-row;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: inline-block;
  margin: 0;
  width: 40px;
}

li li {
  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>

列表没有缩进？

2 个答案: