使列表项可点击 (HTML/CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3486110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make A List Item Clickable (HTML/CSS)
提问by Daniel O'Connor
So I'm trying to make each list-item on my siteclickable but I'm not sure what is the best way to do it. Please help me out.
所以我试图让我网站上的每个列表项都可以点击，但我不确定什么是最好的方法。请帮帮我。
So here is the relevant HTML:
所以这里是相关的 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>
And here is the relevant CSS:
这是相关的CSS：
.content ul li {
display:block;
list-style:none;
padding:5px 10px 5px 15px;
}
.content li li {
// This is for when there are sub-categories.
border-bottom: none;
border-top: 1px solid #f8d9d0;
margin: 3px -10px -3px -15px;
padding: 5px 0px 5px 30px;
}
.buy {
float: right;
margin-top: -2px;
}
// The next ones all deal with the shopping cart icon that appears only on hovers.
.listblock ul li img {
visibility: hidden;
}
.listblock ul li:hover img {
visibility: visible;
}
.listblock ul li ul li img {
visibility: hidden !important;
margin-right: 10px;
}
.listblock ul li ul li:hover img {
visibility: visible !important;
margin-right: 10px;
}
How can I make the whole list-item clickable and still have the shopping cart icon and Google Analytics Event tracking still work? Is there some jQuery magic I can use?
如何使整个列表项可点击，同时购物车图标和 Google Analytics 事件跟踪仍然有效？我可以使用一些 jQuery 魔法吗？
I've tried using display:block for the Amazon links, but that seems to mess up the image placement.
我试过对亚马逊链接使用 display:block ，但这似乎弄乱了图像放置。
Thank you so much!
非常感谢！
回答by Yi Jiang
I think you could use the following HTML and CSS combo instead:
我认为您可以改用以下 HTML 和 CSS 组合：
<li>
<a href="#">Backback</a>
</li>
Then use CSS background for the basket visibility on hover:
然后在悬停时使用 CSS 背景来显示篮子：
.listblock ul li a {
padding: 5px 30px 5px 10px;
display: block;
}
.listblock ul li a:hover {
background: transparent url('../img/basket.png') no-repeat 3px 170px;
}
Simples!
简单！
回答by Alan
The li element supports an onclick event.
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>
回答by webtech
Here is a working solution - http://jsfiddle.net/STTaf/
这是一个有效的解决方案 - http://jsfiddle.net/STTaf/
I used simple jQuery:
我使用了简单的 jQuery：
$(function() {
$('li').css('cursor', 'pointer')
.click(function() {
window.location = $('a', this).attr('href');
return false;
});
});
回答by PK-1825
HTML and CSS only.
仅 HTML 和 CSS。
#leftsideMenu ul li {
border-bottom: 1px dashed lightgray;
background-color: cadetblue;
}
#leftsideMenu ul li a {
padding: 8px 20px 8px 20px;
color: white;
display: block;
}
#leftsideMenu ul li a:hover {
background-color: lightgreen;
transition: 0.5s;
padding-left: 30px;
padding-right: 10px;
}<div id="leftsideMenu">
<ul style="list-style-type:none">
<li><a href="#">India</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Russia</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Afganistan</a></li>
<li><a href="#">Landon</a></li>
<li><a href="#">Scotland</a></li>
<li><a href="#">Ireland</a></li>
</ul>
</div>回答by joefly
The key is to give the anchor links a display property of "block" and a width property of 100%.
关键是给锚链接一个“块”的显示属性和一个 100% 的宽度属性。
Making list-items clickable (example):
使列表项可点击（示例）：
HTML:
HTML：
<ul>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
<li><a href="">link3</a></li>
</ul>
CSS:
CSS：
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;
}
回答by Paul Schreiber
Ditch the <a href="...">. Put the onclick(all lowercase) handler on the <li>tag itself.
抛弃<a href="...">. 将onclick（全小写）处理程序放在<li>标签本身上。
回答by Nikita Rybak
How about putting all content inside link?
将所有内容放在链接中怎么样？
<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>
Seems like the most natural thing to try.
似乎是最自然的尝试。
回答by Istvan Nonn
I'm sure it is a late response, but maybe is useful for somebody else.
You can put all your <li>element content into <a>tag and add the following css:
我确定这是一个迟到的回应，但也许对其他人有用。您可以将所有<li>元素内容放入<a>标签并添加以下 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;
}
