使用Display:flex和justify-content:space-between时左右边距不均及footer布局问题

核心问题分析 #

你的代码存在两个关键缺失：

• .footer未设置justify-content: space-between，这是实现子元素左右分布的核心属性
• 浏览器默认给<ul>添加了padding-left，导致左侧列表与屏幕边缘的间距大于右侧

修正步骤 #

1. 给Footer添加对齐属性
   修改.footer的CSS，让内部元素左右分布并统一边缘间距：

   .footer{
     display: flex;
     justify-content: space-between; /* 让两个ul分别靠向左右两侧 */
     background-color: gainsboro;
     padding: 0 16px; /* 统一左右边缘间距，与Header保持一致 */
   }
   

2. 清除UL的默认内边距
   去掉浏览器给<ul>加的默认左内边距，保证左右间距对称：

   ul{
     list-style-type: none;
     padding: 0; /* 清除默认padding-left */
     margin: 10px 0; /* 可选，调整列表上下间距 */
   }
   

3. 统一Header的间距（推荐）
   给.header也添加左右内边距，让整体布局更协调：

   .header{
     display: flex;
     justify-content: space-between;
     padding: 0 16px; /* 与Footer保持一致的边缘间距 */
   }
   

修正后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img {
  width: 600px;
}
ul{
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
}
button {
  font-family: Roboto, sans-serif;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  background: #eee;
}

input {
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 8px 24px;
  width: 400px;
  margin-bottom: 16px;
  background-color: gainsboro;
}

.header{
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}
.left-links{
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.right-links{
  display: flex;
  flex-direction: row;
  gap: 10px;
}
a{
  text-decoration: none;
  color: black;
}
.content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.footer{
  display: flex;
  justify-content: space-between;
  background-color: gainsboro;
  padding: 0 16px;
}

修改后，Footer内的两个列表会分别靠向屏幕左右两侧，且与边缘保持相等间距，和Header布局一致，符合预期效果。

内容的提问来源于stack exchange，提问作者Roberto Judele