Wie kann ein UL-Artikel innerhalb seines enthaltenden DIV bleiben?

Question

Ich habe ein sehr einfaches Setup:

<div class="container">
  <ul>
    <li>Projekt 1</li>
    <li>Projekt 2</li>
  </ul>
</div>

Ich hätte gedacht, dass sich der gesamte Inhalt und die Aufzählungspunkte der UL innerhalb der Div befinden würden, aber das ist derzeit nicht der Fall.

ULs Aufzählungszeichen erscheinen außerhalb des Div, und wenn der Überlauf ausgeblendet ist, verschwinden sie tatsächlich.

Für mich ist das in gewisser Weise problematisch, und dieses Problem besteht in verschiedenen Browsern. Ich habe die HTML-Spezifikation nachgeschlagen, kann aber nichts darüber finden, wie dies geschehen soll.

Gibt es eine CSS-Korrektur oder eine andere Layout-Korrektur?

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