【问题标题】:Evenly distribute li items, with absolute width均匀分布 li 项,具有绝对宽度
【发布时间】:2015-02-03 01:32:50
【问题描述】:

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

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

这就是我所拥有的:

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

最好的方法是什么?

【问题讨论】:

    标签: html css wordpress responsive-design


    【解决方案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 元素,它会干扰间距。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多