Question

我正在开展一个项目，并且遇到了UL＆gt; LI风格的问题。

我正在尝试将图像放在列表中，我希望当我将鼠标悬停在链接上时图像颜色会发生变化，因此我使用了2张图像

1个橘子＆amp; 1蓝色

但我无法通过顶部导航链接对图像进行中心化。

enter image description here

代码是：

HTML：

<div id="TopMenu">
    <ul style="display:">
        <li class="HeaderLiveChat" style="display:none"></li>
        <li class="First" style="display:">
            <a href="/account.php">My Account</a>
        </li>
        <li style="display:">
            <a href="/orderstatus.php">Order Status</a>
        </li>
        <li style="display:">
            <a href="/wishlist.php">Wish Lists</a>
        </li>
        <li>
            <a href="/giftcertificates.php">Gift Certificates</a>
        </li>
        <li class="CartLink" style="display:">
            <a href="/cart.php">
        </li>
        <li style="display:">
        <div>
            <a onclick="" href="/login.php">Sign in</a>
            or
            <a onclick="" href="/login.php?action=create_account">Create an account</a>
        </div>
        </li>
    </ul>
    <br class="Clear">
</div>

CSS：

/* Top Navigational Menu */
#TopMenu {
    position: absolute;
    right: 10px;
    top: 70px;
    font-size: 10px;
    text-align: right;
}

#TopMenu ul, #TopMenu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#TopMenu ul li {
    display: inline;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding: 0px 4px 0 6px;
}

#TopMenu ul li.First {
    border-left: 0;
}

#TopMenu ul li.home {
    background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat;
    height:16px; width:16px;
}

#TopMenu a {
    color: #333;
}

#TopMenu a:hover, #TopMenu a:visited {
    color: #333;
}

#TopMenu li div {
    display: inline;
}

请帮助我解决这个问题

注意：

我想在每个链接上更改图标，上面的图像只是一个示例图像

谢谢

Answer 1

您需要为锚点添加css：

a {
  padding-top: 20px;
  background: url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat 50% 0px;
  height: 16px;
  width: 16px;
}

50%以背景为中心。当然，您应该为所有锚点使用更具体的选择器，而不仅仅是a。

要在鼠标悬停时更改图像，您需要：

a:hover {
 background-image: url('http://icons.iconarchive.com/icons/3xhumed/mega-games-pack-32/16/Team-Fortress-2-new-16-icon.png');
}

see demo here

Answer 2

做了两处修改

为图像添加了25px的顶部填充

#TopMenu ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px;
padding: 25px 4px 0 6px;
}

更改了徽标background-position:center;（请注意我使用了简写符号）

#TopMenu ul li.home {
background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat center;
height:16px; width:16px;
}
#TopMenu ul li.home:hover {
background:url('http://cdn1.iconfinder.com/data/icons/cologne/16x16/home.png') no-repeat center;
}

工作演示：http://jsfiddle.net/naveen/HuTge/1/

P.S：请注意我使用#TopMenu并且降价功能无效。

Answer 3

HTML：

<ul class="navigation">
    <li>
        <a id="nav-myaccount" href="/account.php">My Account</a>
    </li>
    <li>
        <a id="nav-orderstatus" href="/orderstatus.php">Order Status</a>
    </li>
</ul>

CSS：

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.navigation li {
    display: inline;
    margin: 0px;
    padding: 0px 4px 0 6px;
}

ul.navigation li a#nav-myaccount {
    background-image: url(nav-myaccount.png);
    background-repeat: no-repeat;
    background-position: center top;
}

ul.navigation li a#nav-myaccount:hover {
    background-image: url(nav-myaccounthover.png);
    background-repeat: no-repeat;
    background-position: center top;
    color: #333;
}

ul.navigation li a#nav-orderstatus {
    background-image: url(nav-orderstatus.png);
    background-repeat: no-repeat;
    background-position: center top;
}

ul.navigation li a#nav-orderstatus:hover {
    background-image: url(nav-orderstatushover.png);
    background-repeat: no-repeat;
    background-position: center top;
    color: #333;
}

请注意，不是为每个导航项使用不同的图片，而是应该将它们全部放在同一张图片中并使用背景位置来改变背景的位置，当你将鼠标悬停在导航项上时，客户端不会不必加载悬停图像，因为悬停图像尚未加载，图像闪烁时不会出现瞬间瞬间。

列表项目上方的中心图像

3 个答案: