避免由行高引起的锚点中的额外 space - 弹性布局

Question

我有这组带链接的框，它们显示为弹性项目。问题是由于每个框的高度，可点击区域（黄色区域）的覆盖范围不一致。将锚标记的行高设置为零可以解决此问题，但会引入其他问题，例如重叠文本。如何在保持行高和弹性行为的同时解决此问题？

谢谢

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

li {
  border: 1px solid red;
  background: #fff;
  flex: 1 1 0;
}

a {
  background: yellow;
  text-decoration: none;
  padding: 40px;
  display: inline-block;
  line-height: 1.3;
  /*height: 100%;
  box-sizing: border-box;*/
  width: 100%;
}

<ul>
  <li>
    <a href="#">
        one 
      </a>
  </li>
  <li>
    <a href="#">
        two blah blahdfdfdfdfdfdfd
      </a>
  </li>
  <li>
    <a href="#">
        three blah blah
      </a>
  </li>
  <li>
    <a href="#">
        four
      </a>
  </li>
  <li>
    <a href="#">
        five
      </a>
  </li>
  <li>
    <a href="#">
        six
      </a>
  </li>
</ul>

Answer 1

您必须将 height: 100%; box-sizing: border-box; 添加到 a css

ul {
  list-style: none;
  display: flex;
}

li {
  border: 1px solid red;
  background: #fff;
}

a {
  background: yellow;
  text-decoration: none;
  padding: 40px;
  display: inline-block;
  line-height: 1.3;
  height: 100%;
  box-sizing: border-box;
}

<ul>
  <li>
    <a href="#">
        one 
      </a>
  </li>
  <li>
    <a href="#">
        two blah blah
      </a>
  </li>
  <li>
    <a href="#">
        three blah blah
      </a>
  </li>
  <li>
    <a href="#">
        four
      </a>
  </li>
  <li>
    <a href="#">
        five
      </a>
  </li>
  <li>
    <a href="#">
        six
      </a>
  </li>
</ul>

避免由行高引起的锚点中的额外 space - 弹性布局

Avoid extra space in anchor caused by line height - flex layout

html

css

flexbox

line-height