在調整大小時使錨標簽高度為父級的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的方式，列表項已經都是相同的高度，您只需要添加一個垂直align屬性，使其居中即可。

因此，您的li CSS應該如下所示：

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

您可以在這里查看我的Codepen

Answer 2

絕對放置標簽以無形地覆蓋整個單元。 現在它對單元的內部布局沒有影響

li {
  position: relative
}

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