UL项目如何保持在其包含的DIV内？

Question

我有一个非常简单的设置：

<div class="container">
  <ul>
    <li>项目一</li>
    <li>项目二</li>
  </ul>
</div>

我原以为所有内容和UL的项目符号都会在div内部，但目前情况并非如此。

UL的项目符号出现在div外部，当overflow被隐藏时，它们实际上消失了。

对我来说，这在某种程度上是有问题的，而且在各种浏览器中都存在这个问题，我已经查阅了HTML规范，但没有找到任何关于这种情况应该发生的说明。

有没有CSS修复方法或其他布局修复方法？

Answer 1

list-style-position: inside 在大多数情况下都很好用，除非在小屏幕上需要多行的项目符号，因为这样会导致文本与项目符号对齐，而不是与文本的起始位置对齐。

保持默认的 text-align: outside，允许一个小的边距，并将文本左对齐以覆盖任何居中的容器，可以解决项目符号对齐的问题。

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}

Answer 2

您将需要使用 list-style-position：

ul {
   list-style-position: inside;
}