html - 我的导航一团糟，右边框不起作用

Question

我试图在每个部分之间设置正确的边框，并让每个单词成为一个单独的范围，但它就是行不通。我会喜欢一些帮助。所有 4 个边框都在侧面，甚至不足以占据整个导航。请告诉我发生了什么事。我会张贴图片，但我的代表不够高。它基本上是一个具有 4 个不同链接的导航，我希望它们之间的边界很小，但是当我将 span 放在所有列表项上时，边界会变小并聚集到导航的右侧。就像跨度甚至不在列表项上一样。

这是我的导航 HTML:

<nav id="navigation">
    <ul>
        <span class="navSpace"><li>Home</li></span>
        <span class="navSpace"><li>Services</li></span>
        <span class="navSpace"><li>Info</li></span>
        <span class="navSpace"><li>FAQ's</li></span>
    </ul>   
</nav>

还有我的导航的 CSS:

#navigation{
width: 100%;
height: 50px;
padding-bottom: 0px;
}
#navigation li{
list-style: none;
text-align: left;
display: inline;
float: left;
padding: 5px;
margin-right: 25px;
font-size: 20px;
}
.navSpace{
text-decoration: none;
color: black;
text-shadow: 2px 2px 5px white;
border-right: 2px solid black;

}

抱歉没有图片，谢谢。

Answer 1

尝试移动这条线:

border-right: 2px solid black;

进入你的#navigation li部分。

编辑:正如其他几个答案所述，您应该简化它并删除 <span>元素，为了清晰和简单。