Question

我尝试在每个部分之间插入正确的边框，并将每个单词作为单独的跨度，但它只是不想工作。我会喜欢一些帮助。所有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;

}

很抱歉没有照片而且提前谢谢。

Answer 1

尝试移动此行：

border-right: 2px solid black;

进入#navigation li部分。

编辑：正如其他几个答案所述，为简洁起见，您应简化此操作并删除<span>元素。

Answer 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);

        }

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

2 个答案: