在调整大小时使锚标记100％的父级高度

Question

我有这样的导航：

<ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
</ul>

和css设置为

ul {display:table;}
li {display:table-cell;}
a {display:block;}

然而，当我调整屏幕大小时，我的菜单缩小，新行上的一些文本中断。现在该链接很好，但是仍然只占用一行的链接仅用于填充：10px 5px;并且父元素具有空格。

看起来非常丑陋，因为:hover改变了锚点的BG颜色......

由于

Answer 1

所以我认为问题是当你的第一个列表项是多行时，你不喜欢第二个列表项与第一个列表项没有垂直对齐。通过设置CSS的方式，列表项已经具有相同的高度，您只需要添加一个垂直对齐属性，使其居中。

所以你的问题应该是这样的：

li {
    display: table-cell; 
    vertical-align: middle;
}

您可以查看我的codepen here

Answer 2

绝对定位标签以无形地覆盖整个单元格。现在它对单元格的内部布局没有影响

li {
  position: relative
}

li a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}