Я пытаюсь создать горизонтальную навигационную панель в css с 5 равномерно разнесенными ссылками. Html, надеюсь, будет выглядеть следующим образом:
<div id="footer">
<ul>
<li><a href="one.html">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="three.html">Three</a></li>
<li><a href="four.html">Four</a></li>
<li><a href="five.html">Five</a></li>
</ul>
</div>
Итак, с помощью CSS я хочу разместить их равномерно в нижнем колонтитуле. Пока я использую это:
div#footer{
height:1.5em;
background-color:green;
clear:both;
padding-top:.5em;
font-size:1.5em;
width:800px;
}
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
display:inline-block;
text-align:center;
}
Это работает очень хорошо, но между лигами есть пробел, который я не хочу. Вот почему я использовал 155px вместо 160px для их ширины, между ними есть около 5px пространства. Откуда этот промежуток? Как я могу избавиться от него? Если я увеличиваю шрифт, расстояние увеличивается.