У меня есть горизонтальная панель навигации в заголовке моего сайта.Я почти закончил стилизацию, но я не могу обойти одну проблему.
У меня есть, я думаю, 1px, интервал ниже меню.(см. маленькую зеленую линию прямо под «страницей блога». Я обнаружил, что это вызвано float: left, которое я использую для li-элементов. Если я удаляю float, я получаю нежелательный интервал с правой стороны каждогопункт меню
Вокруг него нет отступов или полей, и я не вижу другого кода, который, по моему мнению, мог бы вызвать проблему.
HTML (сокращенно):
<nav id="main-nav" role="navigation" aria-label="Hoofdmenu">
<ul id="primary-menu" class="menu" role="menubar" style="">
<li id="menu-item-2129" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-703 current_page_item current_page_parent menu-item-2129"><a href="http://theme.test/blog/">a Blog page</a></li>
<li id="menu-item-2100" class="menu-item menu-item-has-children menu-item-2100" aria-haspopup="true" aria-expanded="false" tabindex="0"><a>Template 2</a></li>
<li id="menu-item-2126" class="menu-item menu-item-has-children menu-item-2126" aria-haspopup="true" aria-expanded="false" tabindex="0"><a>Template 3</a></li>
</ul>
</nav>
CSS:
#main-nav {
width: 100%;
display:block;
}
#primary-menu {
display: block;
text-align: left;
margin: 0;
padding: 0;
}
li {
line-height: 50px;
opacity: 1;
list-style: 0;
display: inline-block;
position: relative;
float: left;
}
a {
padding: 0 20px;
display: block;
}