Question

我想使用UL和LI创建水平菜单。唯一的问题是每个按钮都有图像中的文字，所以我想看到图像和onmouse结束。

我尝试给每个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;
}

：将图像放在每个按钮旁边....

Answer 1

在background-image标记内使用li。您可以使用margin和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; }

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

1 个答案: