如何制作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