如何将子弹图像转换为链接？

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，我担心无法链接。可能需要使用list-style-type: none;并向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>

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>

设置项目符号的样式并指定它们应位于＆gt; li＆gt;内。不在外面。

ul {
    list-style-position: inside;
}

指定链接的填充（例如：20px）并相对地（向左）定位链接以便与子弹重叠（例如：-20px）。

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