背景图像分割器不会显示在我的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

您可以使用如下图像路径：

background-image：background-image：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>