如何实现HTML页脚（footer）各详情模块横向排列展示

实现方案 #

你只需要给包裹两个.footer-details模块的外层父容器添加Flexbox布局，即可实现横向排列的效果，具体操作如下：

• 先修正你现有HTML里的小错误：营业时间的标题标签没有正确闭合，将<h1>Hours<h1>修改为<h1>Hours</h1>即可。
• 添加如下CSS代码：

/* 此处的.footer-container替换为你实际包裹两个.footer-details的外层div的类名即可 */
.footer-container {
  display: flex;
  /* 两个模块之间的间距，可根据设计需求调整数值 */
  gap: 60px;
  /* 移动端适配：屏幕宽度不足时自动换行改为纵向排列 */
  flex-wrap: wrap;
}

/* 以下为可选优化样式，可让显示效果更贴近常规footer设计 */
.footer-details h1 {
  font-size: 18px;
  margin-bottom: 12px;
}
.footer-details ul {
  list-style: none;
  padding: 0;
  line-height: 1.8;
}
.social-links {
  display: flex;
  gap: 12px;
}

如果需要调整横向对齐方式，可以给.footer-container额外加justify-content: space-between属性，让两个模块分别靠左右两端对齐；如果需要居中对齐就加justify-content: center。

内容的提问来源于stack exchange，提问作者Sandra Tia