nav-justified如何工作？

Question

我感到惊讶的是，无论使用两行CSS计算元素，任何数量的元素都可以调整为相同的宽度：

display: table-cell;
width: 1%;

以下代码：

<div style="width: 50%">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Long link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</div>

每个li的宽度为50%/4 = 12.5%。

这两行CSS代码对于制作技巧至关重要。有没有人根据W3C规范解释它是如何工作的？

更新技巧的另一个有用补充是li { text-align: center; }。