导航栏（navbar）内容错位，是否与padding设置有关？

我发现自己犯了一个简单的错误——把按钮内容放在了</a>闭合标签之外。

当前导航栏的显示情况：第一个数字显示在按钮区域内，后面的数字则显示在按钮下方。

HTML代码 #

<nav>
 <div id="navbar"><ul>
  <li><a href = "" class="noSelect" onclick="dummy(0); return false;">---1---</a></li>
  <li><a href = "events" class="noSelect"></a>---2---</li> <!--Upcoming Events, Join Clubs, Contact Us-->
  <li><a href = "clubs" class="noSelect"></a>---3---</li> 
  <li><a href = "contact" class="noSelect"></a>---4---</li>
 </ul></div>
</nav>

CSS代码 #

#navbar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
}
#navbar ul {
    list-style-type: none;
}
#navbar ul li {
    display: inline;
    float: left;
}
#navbar ul li a {
    display: block;
    padding: 20px;
    text-decoration: none;
}
#navbar ul li a:hover {
    background-color: #B30003;
}

我之前以为问题出在padding设置上，想问下这个情况是否和#navbar ul li a的配置有关？感谢各位的阅读与帮助！

内容的提问来源于stack exchange，提问作者Hydro