Html 如何将项目符号图像转换为链接？

CSS

---

HTML

Sue Vercauteren，儿童部主任

---

结果：（显示图像而不是项目符号）

Sue Vercauteren，儿童部主任

---

我需要将li项目左侧的项目符号制作成图像和链接。我知道如何编写css来添加图像，但我不知道如何使其成为链接

我可以使用CSS使图像显示，但我希望我的链接在单击图像时工作

有什么办法吗

像这样：

  <ul class="rss">
     <li><a href="link goes here" target="_parent">
        <img src="Images/Goldnbluebutton.gif"id="Goldnbluebutton_22">    
         </a><strong>Sue Vercauteren, </strong><em>Director of Children's Ministries</em></li>

如果不更改html或添加JS，恐怕无法链接。使用

列表样式类型的可能解决方法：无

并将

div

添加到带有背景的

li

（在您的案例背景图像中）。 像这样：

HTML

---

像平常一样创建列表，包括链接标记本身

ul {
    list-style-type: none;
}
div {
    float: left;
    background: red;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

为链接指定一个填充（例如：20px）并相对定位链接（向左），以便与项目符号重叠（例如：-20px）

---

不确定您实际想要完成什么，因为您无法添加到背景项目符号图像的链接。请更新您的主要帖子，不要将其添加到评论中：）

项目符号本质上是不可读取的，因为它们实际上不是元素。使用

是最好的方法，尤其是当需要图像时，所以+1。我不知道你为什么需要内部的

？将背景设置为div似乎更自然，可能没有必要…我只是在

上设置背景，并将所有样式也移动到它，但这是我个人的偏好，我认为这种方式确实有效，但没有必要有额外的div，因为你可以用填充物来设计li项目。谢谢将

背景图像

添加到

.rss li a

而不是

li

标记。谢谢。问题解决了！

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

<ul>
    <li><a href="#"><div></div></a>link</li>
    <li><a href="#"><div></div></a>link</li>
    <li><a href="#"><div></div></a>link</li>
</ul>

ul {
    list-style-type: none;
}
div {
    float: left;
    background: red;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

ul {
    list-style-position: inside;
}

ul li a {
    position: relative;
    left: -20px;
    padding: 20px;
}