Горизонтальное расстояние CSS меню LI

Я пытаюсь расположить ящики для каждого тега <li> рядом друг с другом без пробелов, но, как и сейчас, они имеют большое пространство между каждым ящиком. Как мне это удалить?

HTML-код: Меню 

<div id="menucontainer">
    <ul id="menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option1</a></li>
    </ul>
</div>

</body>
</html>

Код CSS: 

ul {
margin: 0px;
padding: 0;
}

#menu li {
display: inline;
list-style: none;
}
#menu li a {
margin: 0px;
padding: 5px 30px 5px 30px;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 15px;
color: rgba(66,48,1,1);
border: 1px solid rgba(105,181,50,1);
background: rgba(122,199,67,1);
}
#menu li a:hover {
cursor: pointer;
background: rgba(178,232,139,1);
color: rgba(0,0,0,1);
}
#menu a:link, #menu a:visited {
color: rgba(255,255,255,1);
text-decoration: none;
}
#menu a:active {
color: rgba(250,191,12,1);
}
#menu a#current {
background: rgba(85,137,48,1);
}
1 2
css html-lists spacing

1 ответ:

Эти пробелы являются символами пробела. Вы можете увидеть их, когда наведете курсор на один из этих пробелов - он изменится на текстовый курсор.

Вы можете избежать этого с помощью

  1. Запишите элементы списка в одну строку, избегая пробелов
  2. перемещайте элементы списка следующим образом:

CSS: 

#menu li {
    display: inline;
    list-style: none;
    float: left;
}
3