UL don't stay within their containing DIVs?

Question

I have a really simple set up

  

    
Item one
    
Item two
  
<         


        
                      

              相关标签:
       
      

Answer 1

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.

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

Answer 2

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

ul {
   list-style-position: inside;
}

Answer 3

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).

Answer 4

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.

Answer 5

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>