Css 水平对齐页脚

我有一个小问题，我的页脚为一个网站，我已经作出。因此有两个部分： -顶部：。页脚部分，带3个div -底部：。页脚底部只有一个p

我知道问题出在哪里，但不知道如何解决：.footer节的第一个子节更密集，占用了我猜测的1/3以上的空间

.页脚{ 文本对齐：居中； 背景色：333； 颜色：fff； 填充：50px； 底部：0； 宽度：100%； } .footer.footer节{ 显示器：flex； 证明内容：之间的空间； } .footer.footer节div{ 填充：2rem0rem； 排名：0； } .footer.footer部分p{ 字体大小：14px； } .footer.footer底部{ 文本对齐：居中； } .footer.footer底部p{ 字体大小：14px； } .页脚ul{ 列表样式：无； } 李国宝先生{ 字体大小：14px； 颜色：fff； } 联系 缅甸仰光Pyidaungsu Yeithka路102号

+336241402

contact@hrasia.com

营业时间 星期一至星期五：上午8时至下午5时

星期六：上午9时至下午1时

星期日：休息

博客 阅读我们的最新帖子

如何写简历

面试过程

&抄袭；hrasia.com |由Lorem设计

---

您可以使用flex轻松修复该问题； 加上

这会解决你的问题

---

您也可以在这里进行检查：

首先：因为您有填充，flex需要知道div的宽度，不包括填充，所以您需要添加box size:border box来考虑这一点

您还需要告诉页脚部分，它们应该占用相等的空间。您可以通过向它们添加flex:1来实现这一点

我还添加了border:1px solid-fff，以便更容易看到结果。尝试从.footer中删除框大小：边框框以查看差异

.页脚{ 文本对齐：居中； 背景色：333； 颜色：fff； 填充：50px； 底部：0； 宽度：100%； 框大小：边框框；/*已添加*/ } .footer.footer节{ 显示器：flex； 证明内容：之间的空间； } .footer.footer节div{ 填充：2rem0rem； 排名：0； 边框：1px实心fff； 弹性：1；/*增加*/ } .footer.footer部分p{ 字体大小：14px； } .footer.footer底部{ 文本对齐：居中； } .footer.footer底部p{ 字体大小：14px； } .页脚ul{ 列表样式：无； } 李国宝先生{ 字体大小：14px； 颜色：fff； } 联系 缅甸仰光Pyidaungsu Yeithka路102号

+336241402

contact@hrasia.com

营业时间 星期一至星期五：上午8时至下午5时

星期六：上午9时至下午1时

星期日：休息

博客 阅读我们的最新帖子

如何写简历

面试过程

&抄袭；hrasia.com |由Lorem设计

---

它似乎在水平方向上正确对齐。你想垂直对齐吗？我意识到我添加了不正确的链接。加上现在检查的一个。考虑将最佳答案标记为正确。我将用最大宽度：Calc100%／3进行精确计算。是的，这更有意义。我将编辑我的答案。谢谢

.footer .footer-sections div{
    // Thanks to  Rickard Elimää
    max-width: calc(100% / 3)
}