css - 如何使第二级列表标记与第一级列表的内容对齐

我正在尝试使用margin和/或padding使第二级标记与第一级内容对齐。

我不想对margin和/或padding使用绝对值，因为如果字体大小发生更改，则第二级标记和第一级内容之间将存在明显的差距。

我在第二级OL中尝试了margin-left:-1em;，但这是一个明显的差距。

<ol style="border:1px solid red;">
 <li>First Level</li>
  <ol type="a" style="border:1px solid blue;">
  <li>Second Level</li>
  <li>Second Level</li>
 </ol>
 <li>First Level</li>
 <li>First Level</li>
</ol>

非常感谢G-Cyr。但是我发现有缩进问题。

<ol style="border: 1px solid red;">
 <li>First Level</li>
  <ol type="a" style="padding-left:0; list-style-position: inside; border:1px solid blue;">
  <li>Second Level lines still needs to keep proper indent.</li>
  <li>Second Level</li>
  <li>Second Level</li>
 </ol>
 <li>First Level</li>
 <li>First Level</li>
</ol>

我尝试了padding-left:1.1em; list-style-position: outside;。但是外观确实取决于我使用的字体。下面的字体在那里存在空白。

    <ol style="font: 2em Gill Sans, Gill Sans MT; border:1px solid red;">
     <li>First Level</li>
      <ol type="a" style="padding-left:1.1em; list-style-position: outside; border:1px solid blue;">
      <li>Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.</li>
      <li>Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.Second Level lines still needs to keep proper indent.</li>
      <li>Second Level</li>
     </ol>
     <li>First Level</li>
     <li>First Level</li>
    </ol>

最佳答案

重置默认margin和padding应该就足够了。

ol ol,
li {
  margin: 0;
  padding: 0;
  /* eventually */
  list-style-position: inside;

<ol style="border:1px solid red;">
  <li>First Level</li>
  <ol type="a" style="border:1px solid blue;">
    <li>Second Level</li>
    <li>Second Level</li>
  </ol>
  <li>First Level</li>
  <li>First Level</li>
</ol>

还是仅仅是列表位置？

ol ol,
ol ol li {
  padding-left: 0.5em;
  list-style-position: inside;

<ol style="border:1px solid red;">
  <li>First Level</li>
  <ol type="a" style="border:1px solid blue;">
    <li>Second Level</li>
    <li>Second Level</li>
  </ol>
  <li>First Level</li>
  <li>First Level</li>
</ol>

关于css - 如何使第二级列表标记与第一级列表的内容对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58958686/