Question

目前我正在使用<li>来显示href链接，问题是当我点击所谓的＆＃39;框时，它不会直接链接到另一个页面，我必须点击href链接它只会链接到另一个页面。我怎么能像每次点击框/ href链接那样将它链接到另一个页面？

My current progress：Fiddle Demo

任何帮助将不胜感激。

Answer 1

你不能像<li>那样<a>行事，但你可以匹配他们的尺码。

更新了Fiddle

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

<强> Updated jsFiddle

如何在一个包中创建href链接和<li> </li>

2 个答案: