如何在一个包中制作href链接和<li>答案

【问题标题】：How to make href link and <li> in one package如何在一个包中制作href链接和<li>
【发布时间】：2015-04-03 09:27:04
【问题描述】：

目前我使用<li> 显示href 链接，问题是当我点击所谓的“框”时它不会直接链接到另一个页面，我必须点击href 链接它只会链接到另一个页面。每当我点击框/href链接时，我怎样才能让它直接链接到另一个页面？

My current progress : Fiddle Demo

我们将不胜感激。

【问题讨论】：

jsfiddle.net/6xqvevwx/5
太好了，成功了！！谢谢你

标签： javascript html css

【解决方案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> 完全相同的大小

【讨论】：

【解决方案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

【讨论】：