无法使A填写li标签答案

【问题标题】：Unable to make A fill out li tag无法使A填写li标签
【发布时间】：2016-02-22 19:18:59
【问题描述】：

一段时间以来一直试图让它工作。我正在尝试为我的新站点创建菜单，我设置了 nav、ul 和 li 标签。当然，我的实际按钮比显示的文本略大，我希望 A 填写 LI 标记。

nav {
  width: 100%;
  min-width: 800px;
  background-color: #EDEDED;
}
nav a {
  color: #000;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;
}
nav ul {
  list-style: none;
  margin: auto auto auto 10vw;
  height: 2em;
  display: block;
}
nav ul li {
  display: inline-block;
  background-color: #DEDEDE;
  vertical-align: middle;
  padding: 0 50px 0 50px;
  height: 2em;
  line-height: 2em;
}
nav ul li:hover {
  background-color: #FF0000;
}

<nav>
  <ul>
    <li><a href='index.php'>Home</a>
    </li>
    <li><a href='index.php'>Home</a>
    </li>
    <li><a href='index.php'>Home</a>
    </li>
  </ul>
</nav>

我觉得我已经尝试了所有方法：

How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?

Stretching <a> tag to fill entire <li>

Expand an <a> tag to fill the space

我真的觉得我的代码应该给出相同的结果。谁能指出我犯了什么错误？

【问题讨论】：

标签： css

【解决方案1】：

在锚点上添加display:block 是正确的想法，但是列表项上的填充会影响结果。将该填充移动到锚点上，一切就绪。

nav {
  width: 100%;
  min-width: 800px;
  background-color: #EDEDED;
}
nav a {
  color: #000;
  text-decoration: none;
  height: 100%;
  width: 100%;
  display: block;
  padding: 0 50px 0 50px;
  box-sizing:border-box;
}
nav ul {
  list-style: none;
  margin: auto auto auto 10vw;
  height: 2em;
  display: block;
}
nav ul li {
  display: inline-block;
  background-color: #DEDEDE;
  vertical-align: middle;
  height: 2em;
  line-height: 2em;
}
nav ul li:hover {
  background-color: #FF0000;
}

<nav>
  <ul>
    <li><a href='index.php'>Home</a>
    </li>
    <li><a href='index.php'>Home</a>
    </li>
    <li><a href='index.php'>Home</a>
    </li>
  </ul>
</nav>

【讨论】：

还可以添加box-sizing : border-box ; 这样锚点就不会溢出。
正要说。似乎每个块的锚点都向右移动
@PeaceDealer - 我在 Chrome 或 FF 上没有看到任何变化。
@PeaceDealer 抱歉，我不清楚图片显示的内容。
@j08691 锚标记延伸到 li 标记之外，相当有一点。如果我将鼠标放在离最右边的 li 标签相当远的地方，它仍然会悬停在它上面。插图：i.imgur.com/vq2lMBv.png

【解决方案2】：

从 ul li 中删除填充：

nav ul li {padding:0px;}

如有必要，将其添加到 nav ul li a:

nav ul li a {padding:0px 50px;}

【讨论】：