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

Question

CSS

 .rss {

    margin: 5px 5px 0 5px;
    padding: 0;
    width: 100%
    }
.rss li {

    display: inline-block;
    width: 40%;
    margin: 0 2% 0 0 ;
    list-style-type: none;
    background: #fff url("http://Images/Goldnbluebutton.gif") 0 3px no-repeat;
    padding: 0 0 5px 15px;
    display: -moz-inline-box;
}

---

HTML

  <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>

---

结果：（出现图像而不是项目符号）

Sue Vercauteren，儿童事工主任

---

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

我可以使用 CSS 使图像出现，但我希望我的链接在单击图像时起作用。

关于如何做到这一点的任何想法？

Answer 1

如果不更改html或添加JS，恐怕链接是不可能的。一种可能的解决方法是使用 alist-style-type: none;并将 a 添加div到li带有背景的（在您的情况下为背景图像）。像这样：http: //jsfiddle.net/SBwUT/

HTML

<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>

CSS

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

Answer 2

像往常一样创建列表，包括链接标签本身。

<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>

为您的项目符号设置样式并指定它们应位于 >li> 内部而不是外部。

ul {
    list-style-position: inside;
}

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

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

Answer 3

像这样：

<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>