How can a UL item stay within its containing DIV?

Question

I have a very simple setup:

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

I would have thought that all the content and the UL's bullet points would be inside the div, but that's not currently the case.

UL's bullets appear outside the div, and when the overflow is hidden, they actually disappear.

To me this is problematic in some way, and this problem exists in various browsers, I've looked up the HTML specification but can't find anything about how this should happen illustrate.

Is there a CSS fix or other layout fix?

Answer 1

list-style-position: inside Works fine in most cases, unless you need multi-line bullets on small screens, as this will cause the text to align with the bullets instead of Aligned to the starting position of the text.

Keeping the default text-align: outside, which allows a small margin and left-aligns the text to cover any centered containers, can solve bullet alignment problems.

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

Answer 2

You will need to use list-style-position:

ul {
   list-style-position: inside;
}