Question

我在尝试添加链接到每个链接之后的css图像时遇到一些问题，文本本身可以工作，但不是右边的图像，我该如何解决？感谢。

<nav>
    <!-- top menu -->
    <ul>
        <li><a href="index.html">Home</a></li>  
        <li><a href="materials_list.html">Materials</a></li>
        <li><a href="screened_Loam.html">Screened Loam/Topsoil</a></li>
        <li><a href="RAP.html">RAP</a></li>
        <li><a href="asphalt.html">Asphalt/Concrete Disposals</a></li>
        <li><a href="delivery.html">Delivery</a></li>
        <li><a href="contact_us.html">Contact</a></li>
    </ul>
    <!-- /top menu -->
</nav>

.header nav ul li:after {
    content:'';
    background:url(../images/sprite.png) 6px 7px no-repeat;
    float:left;
    display:block;
    width:12px;
    height:12px;
}

Answer 1

以此为例：

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
    <a href='http://www.google.com'>
        <img src='http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg'>

    </a>
</body>
</html>

基本上把你的链接，然后把img放在里面。然后你可以给它一个类或id来调整它，移动它等等。

Answer 2

你的后标记没有适应标记的内部。

你需要知道你的

:after to <a> element, not <li>: 
.header nav ul li a:after { ... }

这样您的图片就可以在标记内，并且您的链接也能正常运行。

Answer 3

您需要将:after应用于<a>元素，而不是<li>

.header nav ul li a:after {
    background-image:url( ... );
}

以这种方式，图像在链接

内

Answer 4

你错过了CSS中的a选择器：

.header nav ul li a:after {
    background:url(../images/sprite.png) 6px 7px no-repeat;
    float:left;
    display:block;
    width:12px;
    height:12px;
}

没有a，您只会直接定位li

添加CSS图像链接

4 个答案: