html - 背景图像分隔线不会显示在我的 CSS 菜单中

Question

我在我的 css 菜单中使用了一个图像分隔器，但是联系人按钮末尾的最后一个不会显示..

    <div id="menu">
<ul>
<li><a href="index.html"><span class="used">Home</span></a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contect.html">Contact</a></li>
<img src="img/divider.png" alt="" style="margin-left: auto; margin-right: auto;"/>
</ul>
</div>

那是我的菜单（忽略divider.png，因为那是菜单下方的图像），这是我的CSS。

.header #menu {
word-spacing: 60px;
font: 17px 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #333;
margin: 40px auto 0 auto;
width: 1024px;
overflow: hidden;
}

ul {
    list-style: none;
    display: block;
    text-align: center;
}

li {
    list-style: none;
    width: 239px;
    height: 69px;
    display: inline-block;
    vertical-align: baseline;
    overflow: hidden;
    background: url(../img/nav-divider.png) no-repeat 0 100%;
}

如您所见，我的背景图像是我的分隔符，它适用于联系人列表项之后的所有其他列表项，它不会出现任何人的帮助，这让我发疯了。

非常感谢。

Answer 1

您可以像这样使用图像路径：

背景图像：背景图像：url（'images/image.png'）；

这应该会有所帮助。

Answer 2

当我从 img 标签中取出 css 内容时，它对我有用，即

<img src="img/divider.png" alt="" style="margin-left: auto; margin-right: auto;"/>

到

<img src="img/divider.png" alt=""/>

它还可以通过删除此 img 标签并替换为空白列表项来工作，即<li></li>

Answer 3

检查您的图像路径并尝试这个..如果您在 css 文件中编写样式，

用这个 ：background: url(../img/nav-divider.png) no-repeat 0 100%;

如果您在 html 页面内编写，请使用：background: url(img/nav-divider.png) no-repeat 0 100%;

<style type="text/css" media="screen">
        #menu {
    font: 17px 'Source Sans Pro', sans-serif;
    font-weight: 400;
    color: #333;
    margin: 40px auto 0 auto;
    width: 1024px;
    overflow: hidden;
    }

    ul {
        list-style: none;
        display: block;
        text-align: center;
    }

    li {
        list-style: none;
        width: 19%;
        height: 69px;
        display: inline-block;
        vertical-align: baseline;
        overflow: hidden;
        background: url(../img/nav-divider.png) no-repeat 0 100%;
    }
    a{
        color: white;
        line-height: 69px;
        text-decoration: none;
    }
    </style>



 <div id="menu">
    <ul>
    <li><a href="index.html"><span class="used">Home</span></a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contect.html">Contact</a></li>
    <li><a href="contect.html">Contact2</a></li>
    <li><a href="contect.html">Contact3</a></li>

    </ul>
    </div>