均匀分布 li 项，具有绝对宽度

Posted 2023-03-05

【中文标题】均匀分布 li 项，具有绝对宽度

【英文标题】：Evenly distribute li items, with absolute width

【发布时间】：2015-02-03 01:32:50

【问题描述】：

在响应式网站的页脚中，我需要平均分配一些 li 项。

这就是我想要实现的目标：

这就是我所拥有的：

我想避免为每个 li 设置绝对宽度，以保持网站这部分的响应能力。

最好的方法是什么？

【参考方案1】：

你可以试试

text-align:justify;

为你的 ul 元素

这是一个小提琴

http://jsfiddle.net/89bnF/833/

【讨论】：

谢谢。你能解释一下“之前”和“之后”的用法吗？

【参考方案2】：

你的截图中的效果可以通过使用边距来实现：

.bottomMenu li 
    margin-right: 24px;

如果您想要一个漂亮、合理的外观并且您不关心非常旧的浏览器，您可以使用 flex 模型：

.bottomMenu (
    display: flex;
    justify-content: space-between;

【讨论】：

谢谢安德烈。我想避免对宽度（px）使用绝对值，而是使用相对值（%）。我已经实施了您建议的第二部分，但没有达到预期的结果。这是该网站的链接：www.guestbud.com/secret。我错过了什么吗？

你的footermenu div 只包含一个孩子（ul），所以没有空格。您需要在 .footermenu ul 上设置这些规则 (display:flex;justify-content:space-between;)。此外，您还有一个空的 li 元素，它会干扰间距。