Why don't UL bullets stay within their containing DIV?

user_41709 0
Viewed 37369

I have a really simple set up:

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</div>

I had assumed that all contents and the bullets of the UL would be within the div, but currently this is not the case.

The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.

To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.

Is there a CSS fix for it or other layout fix?

html-lists css html
7 Answers

list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.

Example of badly aligned bullet points

Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.

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

For some cases, using two divs can help.

<div class="container">
  <div style="margin: 3%">
    <ul>
      <li>Item one</li>
      <li>Item two</li>
    </ul>
  </div>
</div>
user_19912480

if using float property on list make sure you only add the style the the selected list and not all list elements on the page.

user_163163070
Related