使列表项可单击（HTML/CSS）

所以我试图让每个列表项都可以点击，但我不确定什么是最好的方法。请帮帮我

下面是相关的HTML：

<ul>
    <li>Backpack <a href="#" title="Buy on Amazon" target="_blank"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Amazon', 'School Supplies', 'Backpack');"/></a></li>
    <!-- More List Items -->
</ul>

如何使整个列表项可点击，并且购物车图标和Google Analytics事件跟踪仍然有效？我可以使用jQuery的魔力吗

我曾尝试在Amazon链接中使用display:block，但这似乎会弄乱图像的放置

---

非常感谢你

将所有内容放在链接中如何

<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>

---

这似乎是最自然的尝试。

我认为您可以使用以下HTML和CSS组合：

<li>
  <a href="#">Backback</a>
</li>

---

傻瓜

扔掉

。将

onclick

（所有小写）处理程序放在

标记本身上。

li元素支持onclick事件

<ul>
<li onclick="location.href = 'http://stackoverflow.com/questions/3486110/make-a-list-item-clickable-html-css';">Make A List Item Clickable</li>
</ul>

使列表项可单击

这是一个有效的解决方案-

我使用了简单的jQuery：

$(function() {
    $('li').css('cursor', 'pointer')

    .click(function() {
        window.location = $('a', this).attr('href');
        return false;
    });
});

---

我相信这是一个迟来的回应，但可能对其他人有用。 您可以将所有

元素内容放入

标记中，并添加以下css：

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area / or other styling */ 
    padding: 5px 20px; 
}

仅限HTML和CSS

#左侧菜单ul li{
边框底部：1px浅灰色虚线；
背景色：卡德蓝；
}
#左侧菜单ul li a{
填充：8px 20px 8px 20px；
颜色：白色；
显示：块；
}
#左侧菜单ul li a：悬停{
背景颜色：浅绿色；
过渡：0.5s；
左侧填充：30px；
右边填充：10px；
}

关键是为锚定链接提供“块”的显示属性和100%的宽度属性。

使列表项可单击（示例）：

HTML:

---

看来这会奏效的。你知道在Dreamweaver或Coda中是否有实现自动化的方法吗？我有150多个列表项。如果你不确定，不用担心。如果你有那么多的项目，你真的应该使用一些服务器端生成，比如Ruby on Rails或Django。使用这个jQuery片段非常糟糕的答案，我已经改进了它。如果你修改了你的“答案”，我会删除-1。我已经用编辑修改过了。你可以自己更正，我撤销我的-1。完美的解决方案，谢谢。演示链接似乎已关闭，因此我制作了此代码笔：

$(function() {
    $('li').css('cursor', 'pointer')

    .click(function() {
        window.location = $('a', this).attr('href');
        return false;
    });
});

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area / or other styling */ 
    padding: 5px 20px; 
}

<ul>
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
</ul>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 5px;
}
ul li a:hover {
  background-color: #ccc;
}