html - 使用内联列表中的图像创建水平导航

Question

我想使用 UL 和 LI 创建一个水平菜单。唯一的问题是每个按钮都有图像中的文本，所以我想查看图像并且鼠标悬停。

我尝试给每个 li 一个具有图像背景宽度和高度的类，一个 li homeButton:hover 但它不起作用。

这是我的html

 <div id="navcontainer">
    <ul id="navlist">
    <li><a href="#"><img src="imgs/nav/home.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/about.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/webshop.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/lookbook.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/blog.png" border="0" /></a></li>
    <li><a href="#"><img src="imgs/nav/news.png" border="0" /></a></li>
    </ul>
</div>

这是我的CSS

    #navlist
{
list-style: none;
padding: 0;
margin: 0;
}

#navlist li
{
display: inline;
padding:0;
margin: 0;
}

#navlist li:before { content: url('../imgs/nav/slash.png'); }
#navlist li:first-child:before { content: ""; }

/*IE workaround*/
/*All IE browsers*/
* html #navlist li
{
background-image: url('../imgs/nav/slash.png');
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0.5em 0 1em;
margin: 0 1em 0 -1em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #navlist { height: 1%; }

* html #navlist li
{
display: block;
float: left;
}

:after 在每个按钮旁边放置一个图像....

Answer 1

background-image在li标签内部使用。你可以玩弄marginand padding，我给了你一些任意的值来让你开始。

#navlist { 
    list-style: none;
    margin: 0; }
#navlist li { 
    background: url('../imgs/nav/slash.png') 0 50% no-repeat;
    margin: 0 0 0 5px; /* The amount of space you want before the image */
    padding: 0 0 0 5px; /* The amount of space you want to allocate for this image */
    display: inline-block; }