拉伸水平ul以适应div的宽度

Question

对于我网站的主导航，有一个980 ul宽div和一个ul的主导航链接。我试图使导航链接伸展，以适应宽度的div均匀。

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

我正在做一些典型的css来水平地制作ul列表(float: left，display: block)。我可以调整它的垫子，以使它非常接近，但我真正需要的是一种方式，使它伸展，以适应自动。有可能吗？

编辑难点1:不能使用表。难点2:每个导航项目将有一个不同的宽度，以适应较长和较短的链接名称。

Answer 1

人们讨厌对非表格数据的表，但你想要的恰恰是表格擅长的地方。<table width="100%">

Answer 2

不雅(但有效)方式:使用百分比

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

这只适用于5 <li>示例。或多或少地，相应地修改您的百分比。如果您的页面上有其他<li>，则始终可以为这些特定的类分配一个"menu-li“类，以便只有它们受到影响。

Answer 3

希望这能帮到你..。因为我尝试了所有的答案，但没有什么是完美的。所以，我不得不自己想出一个解决方案。

#horizontal-style {
  padding-inline-start: 0 !important; // Just in case if you find that there is an extra padding at the start of the line 
  justify-content: space-around;
  display: flex;
}

#horizontal-style a {
    text-align: center;
    color: white;
    text-decoration: none;
}