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

小编典典

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

css

对于我网站的主导航，主导航链接的宽度为980像素，带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列表（浮动：左，显示：块）。我可以调整li的填充以使其非常接近，但是我真正需要的是一种使其自动伸展以适应的方法。可能？

编辑难度1：无法使用表格。困难2：每个导航项的宽度都不同，以容纳更长或更短的链接名称。

阅读 274

2020-05-16

共1个答案

小编典典

这是最简单的方法：

（或table-layout:fixed用于均匀的宽度分布

这在IE7中不起作用。

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

2020-05-16