均匀分发li物品，绝对宽度

在响应式网站的页脚中，我需要平均分配一些li物品。均匀分发li物品，绝对宽度

这就是我想要达到的目标：

enter image description here

这就是我：

enter image description here

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

什么是最佳的处理方式？

来源

2014-12-04 Thibaud Clement

你可以尝试

text-align:justify;

您的UI元素

这里是一个小提琴

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

来源

2014-12-05 00:11:43 jdwallace12

感谢。你能解释你对“之前”和“之后”的使用吗？ – 2014-12-05 00:28:06

在你的屏幕截图的效果可以用保证金来实现：

.bottomMenu li { 
    margin-right: 24px; 
}

如果你想要一个漂亮的，合理的外观和你不关心很老的浏览器，你可以使用柔性模型：

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

来源

2014-12-05 00:29:24

谢谢安德烈。我想避免使用宽度（px）的绝对值，而是使用相对值（％）。我已经实施了你的建议的第二部分，但没有达到预期的结果。这是一个链接到网站：www.guestbud.com/secret。我错过了什么吗？ – 2014-12-05 00:41:33

您的'footermenu' div只包含一个孩子（'ul'），所以没有空间。您需要在'.footermenu ul'上设置这些规则（'display：flex; justify-content：space-between;'）。此外，你有一个空的'li'元素干扰间距。 – 2014-12-05 02:36:02

均匀分发li物品，绝对宽度

回答

相关问题