html - 如何让有序列表的编号在 div 标题下方对齐？

Question

Jsfiddle 在这里:Jsfiddle

关于我绘制的黄色 div 框，我希望我的有序列表编号直接在框下方左对齐。它没有出现在 JSFiddle 上，但在我的家用机器上，由于显示器分辨率不同，数字出现在黄色 div 框之外，如下所示:

我希望我的数字在黄色 div 框下方对齐。我该怎么做？

我试过玩边距，但这看起来太武断了，可能无法跨浏览器/跨系统工作

margin-left: 20px;
margin-right: auto;

Answer 1

通过在有序列表上使用以下 CSS 定义，我成功地将列表编号与您的黄色框对齐:

ol {
    padding:0;
    list-style-position:inside;
}

这是一个工作演示:

.slide {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
  width: 90%;
  border: 1px solid black;
  background-color: #FFFF99;
  margin-bottom: 20px;
}

ol {
  padding: 0;
  list-style-position: inside;
}

.thetext {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
  width: 90%;
  margin-bottom: 20px;
}

<div class="slide">
  <h3>Category 1</h3>
</div>
<div>
  <ol>
    <li class="thetext">Item 1</li>
    <li class="thetext">Item 2</li>
    <li class="thetext">Item 3</li>
  </ol>
</div>

View on jsFiddle

供引用:

The list-style-position CSS property specifies the position of themarker box in the principal block box.

OUTSIDE: The marker box is outside the principal block box.

INSIDE: The marker box is the first inline box in the principal block box, afterwhich the element's content flows.

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position