Как убрать отступ в меню на CSS?

[Ang]

Доброго времени суток, имеется горизонтальное меню на CSS.

HTML

<div id="menu">
<ul>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
<li><a href="">Главная</a></li>
</ul>
</div>

CSS

/* Menu
———————————————--*/
#menu {
height: 40px;
list-style: none;
background-color: #000000;
}

#menu li {
display: inline-block;
float: left;
}

#menu li a {
display: block;
line-height: 40px;
color: #EEEEEE;
padding-left: 10px;
padding-right: 10px;
}

#menu a:hover {
background-color: #CCCCCC ;
text-shadow: 2px 2px 1px #CCCCCC;
color: #444444;
}

Как убрать отступ слева(отмечен красным на картинке)?

Edited August 14, 2013 by Ang

[iamchelovek]

не совсем по теме, но зачем тут флоат? Чтобы сделать гор. меню разве не достаточно просто указать inline-block? И вроде как элемент, у которого прописан флоат, автоматом становится block.

#menu li {

display: inline-block;

float: left;

}

[lexxcode]

А вы в dev tools или firebug заглядываете? там все подсвечивается при наведении и можно посмотреть какие параметры по-умолчанию у элемента.

У списков по-умолчанию есть padding-left настройте его в 0 и отступа "лишнего" не будет

не совсем по теме, но зачем тут флоат? Чтобы сделать гор. меню разве не достаточно просто указать inline-block? И вроде как элемент, у которого прописан флоат, автоматом становится block.

#menu li {

display: inline-block;

float: left;

}

Это уже другой вопрос, можно и на inline-block построить, только там придется бороться с другой проблемой - с пробелами. Можно и на table-cell построить, можно и на flexbox построить.

Плавающие элементы, да автоматически становятся блочными

[Ang]

не совсем по теме, но зачем тут флоат? Чтобы сделать гор. меню разве не достаточно просто указать inline-block? И вроде как элемент, у которого прописан флоат, автоматом становится block.

#menu li {

display: inline-block;

float: left;

}

float для IE.

Edited August 14, 2013 by Ang

[lexxcode]

float для IE.

Ну вот только он действовать будет для всех

[Ang]

У списков по-умолчанию есть padding-left

Спасибо, я забыл про dev tools и firebug, редко пользовался.

float для IE.

Ну вот только он действовать будет для всех

И как посоветуете поступить?

[lexxcode]

И как посоветуете поступить?

Да можно и так поступить как у вас, просто inline-block, там абсолютно бессмыслен.

Если хотели на inline-block'ах делать, тогда надо float убирать, а для старых ie добавлять *zoom:1; чтобы включить hasLayout ну только нужно будет повоевать немного с лишними пробелами