如何让锚点元素覆盖列表项内的全部空间？

问题：
需要让<a>元素完全覆盖<li>的垂直空间，目前只有悬停在锚点文本上才会触发href，锚点上下存在空白区域，设置margin:0无效。

现有基础代码：

li {
  background: pink;
}

a {
  background: #ddd;
}

<ul>
  <li>
    <a href="">Text</a>
  </li>
</ul>

SCSS代码片段：

ul {
        display: block;
        text-align: center;
        cursor: pointer;

        // a:not(.button) {
        //   display: inline-flex;
        // }

        li {
          justify-content: center;
          align-items: center;
          margin: 0;
          padding: 0;
          // padding: $header-nav--padding-v__mobile * 0.5 0px;
          // border-radius: 10px;

          &:hover,
          &:active {
            background-color: #ffffff13;
          }

          a {
            width: 100% !important;
            height: 100% !important;
            display: block !important;
          }

          ul { 
            text-decoration: none;
            display: block;
            position: relative;
            list-style: none;
            padding: 0%;
            margin: 0%;

            li:hover {
              background-color: color-bg(button-primary-hover);
            }
          }
        }
      }

问题根源 #

默认<a>是行内元素，即使设置宽高100%，如果父元素<li>没有合适的布局规则（比如未开启弹性布局），锚点无法继承并撑满列表项的高度；另外浏览器默认的列表样式可能隐含内边距/外边距，也会导致空白区域。

修复方案 #

去掉!important这类强制声明，用弹性布局实现锚点自动撑满：

修改后的CSS代码

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

li {
  background: pink;
  margin: 0;
  padding: 0;
  /* 开启弹性布局，让子元素自动填充空间 */
  display: flex;
  justify-content: center;
  align-items: center;
}

li:hover,
li:active {
  background-color: #ffffff13;
}

li a {
  background: #ddd;
  /* 作为弹性项，撑满整个li的空间 */
  flex: 1;
  /* 确保点击区域覆盖全部，可添加内边距调整点击区域大小 */
  padding: 10px 0;
  text-decoration: none;
}

优化后的SCSS代码

ul {
  display: block;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background: pink;

    &:hover,
    &:active {
      background-color: #ffffff13;
    }

    a {
      flex: 1;
      padding: 10px 0;
      background: #ddd;
      text-decoration: none;
    }

    // 嵌套子列表样式
    ul {
      text-decoration: none;
      position: relative;

      li {
        &:hover {
          background-color: color-bg(button-primary-hover);
        }
      }
    }
  }
}

关键要点 #

• 给<li>添加display: flex，让锚点作为弹性子元素自动填充整个列表项空间
• 使用flex: 1替代强制的width:100%和height:100%，布局更灵活
• 重置<ul>的默认list-style、padding和margin，消除浏览器默认样式的干扰
• 给锚点添加合适的padding，扩大点击区域的同时避免文本紧贴边缘

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