使用百分比margin时li元素溢出的原因与响应式解决方法

问题原因 #

你遇到的横向滚动条问题，核心在于margin的百分比值是相对于最近块级包含块的宽度计算：

• 你的<ul id="list-items">是flex容器，但未显式设置宽度，默认由内容撑开。
• 每个<li>的margin-right:10%是基于<ul>的宽度计算的，这形成了循环依赖：<ul>的宽度需要包含所有<li>宽度+margin总和，而margin大小又取决于<ul>的宽度，最终导致<ul>总宽度超出导航栏可用空间，触发滚动条。

解决方案 #

方案1：使用Flex布局的gap属性（推荐）

这是实现flex项间距最简洁的方式，无需依赖margin百分比，天生支持响应式，还能避免最后一个元素的多余margin：

修改后的CSS代码：

*{
  margin:0;
  padding:0; 
  box-sizing:border-box; 
}
body{
  background-color:yellow;
  width:100%;
  height:100vh;
}

li{
  font-size:20px;
  color:black;
  font-weight:bold;
}

#logo{
  font-size: 40px;
  height:100%;
  display:flex;
  align-items:center;
}

.navigation{
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 1rem; /* 可选：给导航栏左右加内边距，避免内容贴边 */
}

#list-items{
  display:flex;
  list-style-type:none;
  gap: 10%; /* 设置li之间的间距 */
  padding-right: 5%; /* 可选：给ul右侧加内边距，匹配预期的最后一个li与ul的间距 */
}

方案2：用百分比margin并给ul设置明确宽度

如果坚持使用百分比margin，需要给<ul>设置明确宽度，让margin计算有固定基准：

修改后的CSS代码：

*{
  margin:0;
  padding:0; 
  box-sizing:border-box; 
}
body{
  background-color:yellow;
  width:100%;
  height:100vh;
}

li{
  margin-right: 10%;
  font-size:20px;
  color:black;
  font-weight:bold;
}

/* 移除最后一个li的右侧margin，避免多余间距 */
li:last-child{
  margin-right:0;
}

#logo{
  font-size: 40px;
  height:100%;
  display:flex;
  align-items:center;
}

.navigation{
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 2%; /* 可选：避免内容贴边 */
}

#list-items{
  display:flex;
  list-style-type:none;
  width: 65%; /* 给ul设置固定比例宽度，作为margin计算的基准 */
}

方案3：使用calc计算li宽度

通过calc抵消margin的影响，确保所有li+margin的总宽度不超过容器：

修改后的CSS代码：

*{
  margin:0;
  padding:0; 
  box-sizing:border-box; 
}
body{
  background-color:yellow;
  width:100%;
  height:100vh;
}

li{
  margin-right: 10%;
  width: calc((100% - 4*10%)/5); /* 总宽度减去4个margin后，平分给5个li */
  font-size:20px;
  color:black;
  font-weight:bold;
  text-align:center; /* 可选：让文字居中 */
}

li:last-child{
  margin-right:0;
}

#logo{
  font-size: 40px;
  height:100%;
  display:flex;
  align-items:center;
}

.navigation{
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 1rem; /* 可选：避免内容贴边 */
}

#list-items{
  display:flex;
  list-style-type:none;
  width: 100%;
}

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