CODEWITHSUNDEEP
htmlcsshtml-lists
tgandrews
tgandrews

Reputation: 12660

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

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?

Upvotes: 56

Views: 52514

Answers (7)

Matan L.
Matan L.

Reputation: 339

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>

Upvotes: 0

user16316307
user16316307

Reputation: 1

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.

Upvotes: -2

Declan McKenna
Declan McKenna

Reputation: 4870

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

Upvotes: 10

Astra
Astra

Reputation: 11211

You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.

Try adding some padding/margins to your list items (LI element).

Upvotes: 5

Zoidberg
Zoidberg

Reputation: 10323

Are you floating your List items to the left or right? If so then the following will solve your problem.

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div>

Upvotes: 1

Garrett
Garrett

Reputation: 8070

You'll want to use list-style-position:

ul {
   list-style-position: inside;
}

Upvotes: 144

marcgg
marcgg

Reputation: 66436

This kind of problems can usually be fixed using a good reset.css and re-writing all the information such as list-style and so on.

Upvotes: -1

Related Questions