HTML/CSS按钮铺满父区块后边框触发hover异常 求修复方案

问题原因 #

1. 你同时给外层<li>和内层<button>绑定了同一个.butn类，外层li设置的padding:12px会把内层按钮往内挤压，li的12px内边距区域没有被按钮覆盖，就是你所说的「边缘触发异常」的区域，鼠标移到这里时只会触发外层li的hover，不会触发按钮本身的悬停效果。
2. 未设置box-sizing: border-box会导致元素的内边距、边框被额外加到宽度之外，也容易出现容器溢出、对齐偏差的问题。

修复方案 #

1. 调整CSS代码 #

/* 全局基础重置，也可以单独给对应元素设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 按钮父容器样式 */
.btn-wrapper {
  padding: 0;
  list-style: none;
}
.butn {
  text-align: center;
  border: none;
  padding: 12px;
  background-color: #ffeaa7;
  width: 100%;
  display: block;
  font-size: 20px;
  cursor: pointer;
}
.butn:hover {
  background-color: #7bed9f;
  color: white;
}

2. 调整HTML代码 #

只需要修改按钮外层的li类名即可，避免和按钮类重复：

<ul class="listdrop">
  <li class="card-head">Intermidate</li>
  <li>Get Big</li>
  <li>Get Strong</li>
  <li>Feel good</li>
  <li class="pay">300$</li>
  <li class="btn-wrapper">
    <button type="button" class="butn">Buy</button>
  </li>
</ul>

修改后按钮会完全铺满父容器的整个区块，所有区域的hover都会触发按钮的悬停效果，和另外两个参考按钮的展示效果完全一致。

内容的提问来源于stack exchange，提问作者TheOctagon3322