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