我的导航搞砸了，右边框不起作用答案

【问题标题】：My navigation is messed up, and the right border isn't working我的导航搞砸了，右边框不起作用
【发布时间】：2013-06-24 03:17:46
【问题描述】：

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

这是我的导航 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;

}

抱歉没有图片，提前谢谢你。

【问题讨论】：

你的 html 是错误的。 ui 标签的子元素必须是 li 标签 w3c.github.io/html-reference/ul.html stackoverflow.com/questions/17268834/…

标签： html css navigation border

【解决方案1】：

尝试移动这条线：

border-right: 2px solid black;

进入您的#navigation li 部分。

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

【讨论】：

【解决方案2】：

从你的 html 中的 li 中删除 span 并使用这个 css

 #navigation li{
    list-style: none;
    text-align: left;
    float: left;
    padding: 0px 5px;
    margin-right: 25px;
    font-size: 20px;
    border-right: 2px solid black;
    text-shadow: 2px 2px 5px white;   
    }

如果你想要更小的边框，那么这会制作你的边框图像并将其用作 CSS 中的背景图像

 #navigation li{
        list-style: none;
        text-align: left;
        float: left;
        padding: 0px 5px;
        margin-right: 25px;
        font-size: 20px;
        background-image:url (your image path here);

        }

【讨论】：