如何制作href链接和 <li> 一包

Question

目前，我使用<li>来显示href链接，问题是当我单击所谓的“框”时，它不会直接链接到另一个页面，我必须单击href链接，它只会链接到另一个页面。 每当我单击框/ href链接时，如何将其直接链接到另一页，该如何使它像？

My current progress ： 小提琴演示

任何帮助将不胜感激。

Answer 1

您不能使<li>像<a>那样起作用，但是可以匹配它们的大小。

更新小提琴

#colOne ul li
{
  margin-bottom:10px;
  /*padding: 4px 10px;*/
  width:170px;
}
#colOne ul li a
{
    padding: 4px 10px;
    display: block;
}

通过使链接成为一个块元素并向其移动填充而不是其包装，其大小将与<li>完全相同

Answer 2

您应该将填充添加到锚元素（ <a> ）而不是列表项目<li> 。 这有效地增加了链接本身的面积，而不是链接周围的面积。

首先，摆脱列表项的填充（我注释掉的属性）：

#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;
}

然后，将其添加到链接：

.bg1 li a {
    display: block;
    padding: 4px 10px;   
}

更新了jsFiddle