制作<a> follows <li> parent width</li></a>

Question

我有一些<a>包裹在<li>中， 我希望每个<a>的宽度跟<li>的宽度相同，每个<li>都相同，因此每个<li>的所有区域（<a>的区域也是如此）是可点击的。

我在width : 100%中设置了<a>，然后为<li>设置了特定的宽度，但没有效果。怎么办呢？

请帮助。非常感谢你

这是我的代码：

HTML：

<ul class='sidenav'>
<?php   
  foreach ($menu as $key => $value) 
  {
  echo "<li> <a href=".$value[2].".php>".$value[1]."</a> </li>";
  }
?>
</ul>

CSS：

#sidenav li{
  border     : 1px solid red;
  padding    : 10px 10px 10px 0px;
  margin-top : 10px;
  width      : 250px;
}

#sidenav li a{
  border  : 1px solid green;
  padding : 10px 10px 10px 10px;
  width   : 100%;
}

Answer 1

利用display:block

中的li a属性

以下是您的行动代码https://jsfiddle.net/sw556vrv/3/

#sidenav li{
  border     : 1px solid red;
  margin-top : 10px;
  width      : 250px;
  height     : 100px;
}

#sidenav li a{
  border  : 1px solid green;
  margin: 0px auto;  
  display:block; // <-- read about this property
  width   : 100%; // <-- 100% or parent
  height : 100%;
}

Answer 2

a标签默认为inline元素。inline元素的宽度设置无法正常工作。因此更改a display样式属性为inline-block或block.

#sidenav li a{
   border  : 1px solid green;
   padding : 10px 10px 10px 10px;
   width   : 100%;
   display:inline-block;
 }

Answer 3

查看How to make a whole 'div' clickable in html and css without javascript?

这与使用div解决的问题基本相同。

Answer 4

问题在于你有<ul class="sidenav">但在css中你已经写了sidenav作为识别者（id）。

所以，改变

#sidenav li{
  border     : 1px solid red;
  padding    : 10px 10px 10px 0px;
  margin-top : 10px;
  width      : 250px;
}

#sidenav li a{
  border  : 1px solid green;
  padding : 10px 10px 10px 10px;
  width   : 100%;
}

在

.sidenav li{
  border     : 1px solid red;
  padding    : 10px 10px 10px 0px;
  margin-top : 10px;
  width      : 250px;
}

.sidenav li a{
  border  : 1px solid green;
  padding : 10px 10px 10px 10px;
  width   : 100%;
}

或<ul class="sidenav">至<ul id="sidenav">。

然后你可以在其他答案中推荐更改，如果锚标记不会占用父标记的所有宽度（li）...主要是block上显示的更改，正如用户Urahara所说