使用display: inline-block替代float可解决列表项边距重叠问题，通过设置margin-right并利用:last-child去除末项边距，结合font-size: 0消除空白间隙，实现精准等间距布局。
当使用CSS浮动（float）布局列表项时，经常会遇到边距重叠或被覆盖的问题，特别是相邻元素的margin发生合并，导致样式表现不符合预期。一个简洁有效的解决方案是放弃float，改用display: inline-block配合margin-right来实现等间距排列。
问题原因：浮动元素的margin可能因块格式化上下文或外边距合并而异常
浮动的块级元素在水平排列时，虽然可以设置margin，但在某些情况下，尤其是父容器宽度不足或子元素换行时，容易出现视觉上的边距错乱。此外，浮动脱离文档流，也增加了布局控制的复杂度。
推荐方案：使用 display: inline-block + margin-right
将列表项设置为display: inline-block，它们会像内联元素一样水平排列，同时保留块级元素的盒模型特性，便于设置宽高和边距。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 给每个列表项设置
margin-right来控制间隔 - 最后一项可使用伪类选择器去除多余边距：li:last-child { margin-right: 0; }
- 确保父元素设置
font-size: 0</font>或使用HTML注释消除inline-block间的空白间隙</li></ul><H3>示例代码</H3><p>HTML结构：</p><pre class="brush:php;toolbar:false;"><ul class="list"> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul>
CSS样式：
.list { font-size: 0; /* 消除inline-block间隙 */ padding: 0; list-style: none; } <p>.list li { display: inline-block; font-size: 16px; /<em> 恢复文字大小 </em>/ margin-right: 20px; }</p><p>.list li:last-child { margin-right: 0; }优势对比
相比浮动布局，该方法更直观、易维护：
- 无需清除浮动（clear:both）
- 边距控制更精准，避免margin合并问题
- 响应式下更容易调整换行和对齐
基本上就这些，不复杂但容易忽略细节。合理使用
inline-block替代浮动，能有效规避边距被“覆盖”或错位的<a style="color:#f60; text-decoration:underline;" title="常见问题" href="https://www.php.cn/zt/28932.html" target="_blank">常见问题</a>。
