[英]How to make href link and <li> in one package
Currently im using <li>
to display href link, the problem is when i click on the so called 'box'it wont direct link to another page, i have to click on href link it will just link to another page. 目前,我使用
<li>
来显示href链接,问题是当我单击所谓的“框”时,它不会直接链接到另一个页面,我必须单击href链接,它只会链接到另一个页面。 How can i make it like whenever i click on box / href link it will direct link to another page? 每当我单击框/ href链接时,如何将其直接链接到另一页,该如何使它像?
My current progress
: Fiddle Demo My current progress
: 小提琴演示
Any help will be appreciated. 任何帮助将不胜感激。
You can't make an <li>
act like an <a>
, but you can match their sizes. 您不能使
<li>
像<a>
那样起作用,但是可以匹配它们的大小。
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:170px;
}
#colOne ul li a
{
padding: 4px 10px;
display: block;
}
By making the link a block element and moving the padding to it, instead of its wrapper, it will be exactly the same size as the <li>
通过使链接成为一个块元素并向其移动填充而不是其包装,其大小将与
<li>
完全相同
You should be adding the padding to the anchor elements ( <a>
) instead of the list items <li>
. 您应该将填充添加到锚元素(
<a>
)而不是列表项目<li>
。 This effectively increases the area of the link itself, instead of the area around the link. 这有效地增加了链接本身的面积,而不是链接周围的面积。
First, get rid of the padding for the list item (the attributes I commented out): 首先,摆脱列表项的填充(我注释掉的属性):
#colOne ul li
{
margin-bottom:10px;
/*padding: 4px 10px;*/
width:150px;
}
li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
/*position: relative; */
/*display:block; */
text-align: center;
font-weight:bold;
box-shadow: 1px 3px 3px #000;
background: #7EB427;
cursor: pointer;
transition: all 0.2s;
}
Then, add it to the link: 然后,将其添加到链接:
.bg1 li a {
display: block;
padding: 4px 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.