html - 没有 JavaScript 的等距列表项

Question

我有一个必须实现的设计，其中设计师有一个带有均匀间隔项目的顶部导航。

我为此使用了无序列表。我可以让项目均匀分布的唯一方法是使用 javascript（它是一个 CMS 或者 LI 的数量可以变化）。

我遇到的问题是 LI 开始时没有填充，然后填充由 JS 添加，当您在页面之间轻弹时，您会看到明显的跳跃。

有没有办法通过 HTML 实现相同的结果，如果可能的话避免使用表格？

Answer 1

制作您的列表项display:inline-block，然后给它们一个宽度。宽度应以em单位为单位，以便随文本调整大小。

在 IE6 上看起来不太好，但应该是可读/可导航的。

Answer 2

如果我们说的是水平均匀分布，你想要display: table-cell

ul { display: table; width: 100% }
li { display: table-cell }

display: table请注意，如果您希望父容器占据所有可用宽度，则确实需要父容器。