html - 没有缩进的列表？

Question

我遇到了这个 fiddle ，我希望 2.1 没有缩进。请看下面我从别人那里得到的一些代码，效果很好，但我不想要缩进! 有任何想法吗？如果有人可以提供帮助，将不胜感激，谢谢!

代码:

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>

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>