Question

我有一个包含链接的无序列表。

我设置了列表样式，以便链接左侧有一个“ Click Me ”图片。

ul 
{ 
    list-style-image:url(/images/ClickMe.png)
}

问题是：当用户点击“ Click Me ”时，它们不会被重定向，也不会发生任何事情。

如何点击列表图片会触发该列表元素中的链接？

<ul>
    <li><a href="someurl">Some Url</a></li>
    <li><a href="someotherurl">Some Other Url</a></li>
</ul>

Answer 1

我认为这更像是一个CSS问题，因为列表项目符号实际上不是标记的一部分。你可以通过使链接“向左”来包括这样的子弹来作弊（参见jsfiddle snippet）：

ul
{ 
    list-style: disc;
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

a {
    margin-left: -20px;
    padding-left: 20px;
}

Answer 2

您始终可以通过jQuery点击该项目：

$("li").click( function (evt) {
    location.href = $(this).find("a").attr("href");
});

Answer 3

我不知道是否有更好的方法，但这可以通过制作链接大小，使其包含链接左侧的项目符号。

a{
  margin-left: -2em;
  padding-left: 2em;
}

Answer 4

如果你只需要列表中有这些项目符号，你可以通过显示链接“list-item”来完成它而不用列表：

<style>
a{ 
    display:list-item;
    list-style-image:url(/images/ClickMe.png);
    list-style-position:inside;
}
</style>
<div style="padding:12px;">
  <a href="someurl">Some Url</a>
  <a href="someotherurl">Some Other Url</a>
</div>

http://jsfiddle.net/zp8QU/

Answer 5

顺便提一下，这也有效，但没有通过验证，是否有人知道是否有正确的方法？

<body>
    <ul>
        <a href="someurl"><li>Some Url</li></a>
        <a href="someotherurl"><li>Some Other Url</li></a>
    </ul>
</body>

如何单击列表图像会触发单击该列表元素内的链接？

5 个答案: