Nieuporządkowana lista nie wyrównująca się do końca w lewo w div

Question

Mam nieuporządkowaną listę, której używam jako prosty pasek nawigacji. To wygląda jak poniżej:

Jak widać jednak, że <li> elementy nie są wyrównując całą drogę z lewej strony <div> są one zawarte w Próbowałem text-align: left; w zawierającego <div> ale wydaje. nie mieć żadnego efektu.

Stosowna HTML:

<div id="menu">                   
    <div id="menutop">                 
     <ul>                    
      <li><a href="#">Home</a></li>            
      <li><a href="#">About</a></li>            
     </ul>                   
    </div>  

Stosowna CSS:

#menu { 
    width: 800px; 
    margin: 0 auto; 
} 

#menu div { 
    float: left; 
    width: 400px; 
    height: 60px; 
    background-color: #CACACA; 
} 

#menutop { 
    text-align: left; 
} 

#menutop ul { 
    list-style: none; 
} 

#menutop li { 
    display: inline; 
    padding: 10px; 
} 

#menutop a { 
    color: #000000; 
    text-decoration: none; 
} 

#menutop a:hover { 
    text-decoration: underline; 
} 

Jakieś pomysły?

Answer 1

ul i li mają margines lub dopełnienie, w zależności od przeglądarki, domyślnie. Trzeba zmienić to domyślny styl w swoim menu:

#menu ul, #menu li { 
    margin: 0; padding: 0; 
} 

Zobacz demo here

^{Uwaga: Domyślnie jsfiddles robi reset CSS, więc nie zawsze jest dobrze nadaje się do testowania tego typu rzeczy . Pamiętaj, aby wyłączyć "Znormalizowany CSS" podczas wyszukiwania tego rodzaju błędów.}

Answer 2

Spróbuj użyć urządzenia CSS Reset.

Najprostszą formą jest:

* { margin: 0; padding: 0; } 

Answer 3

<ul> elementem jest align left, ale <li> elementy mają padding-left zestaw do 10px. Dlatego pierwszy element jest nieco po prawej stronie.

Answer 4

można po prostu przesłonić ul i li dopełnienie i margines.

ten prosty kod:

.menu ul, .menu li{ 
    margin:0; 
    padding:0; 
} 

Answer 5

Można usunąć marginesu i dopełnienie menu

#menu *{ 
margin:0; 
padding:0; 
} 

Answer 6

zestaw wyściółka, margines 0px,

#menutop ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

Demo

http://jsfiddle.net/tQb75/