1

我试图在每个部分之间设置正确的边界，并让每个单词成为一个单独的跨度，但它就是不想工作。我很想得到一些帮助。所有 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;

}

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

4

2 回答 2

0

尝试移动这条线：

border-right: 2px solid black;

进入你的#navigation li部分。

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

于 2013-06-23T18:49:30.120 回答
0

从您的 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);

        }
于 2013-06-23T18:56:57.637 回答