Неупорядоченный список, не выравнивающий весь путь влево в div

У меня есть неупорядоченный список, который я использую в качестве простой панели навигации. Это выглядит следующим образом:

Как вы можете видеть, элементы <li> не выравниваются полностью слева от <div>, в которых они содержатся. Я пробовал text-align: left; в содержащем <div>, но, похоже, нет эффект.

Соответствующий HTML:

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

Соответствующий 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;
}

Любые идеи?

Ответы

Ответ 1

ul и li имеют по умолчанию маркер или дополнение, в зависимости от браузера. Вам необходимо переопределить этот стиль по умолчанию в вашем меню:

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

Смотрите демонстрацию здесь

^{Примечание. По умолчанию jsfiddles использует CSS reset, поэтому не всегда хорошо подходит для тестирования такого рода вещей. Обязательно отключите "Normalized CSS" при поиске такого рода ошибок.}

Ответ 2

установить отступ, margin 0px,

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

Демо

http://jsfiddle.net/tQb75/

Ответ 3

Попробуйте использовать CSS Reset.

Простейшая форма:

* { margin: 0; padding: 0; }

Ответ 4

вы можете просто переопределить заполнение и маркер ul и li.

этот простой код:

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

Ответ 5

Вы можете удалить поле и дополнение меню

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

Ответ 6

<ul> элемент выравнивается влево, но <li> элементы имеют padding-left, установленный в 10px. Поэтому первый элемент немного вправо.