如何无需重复添加<br/>标签实现HTML列表项间清晰分隔？

核心问题分析 #

你当前的问题源于两个关键点：一是依赖<br>这种硬编码方式控制间距，不符合样式与结构分离的规范；二是使用了过时的align="left"属性让图片浮动，导致父元素无法正确包裹浮动内容，进而影响了列表项的正常布局间距。

正确解决方案 #

我们可以通过CSS规范布局，完全替代<br>标签，同时解决图片浮动带来的布局问题：

1. 移除所有<br>标签，替换过时的align、hspace属性为CSS样式
2. 为列表项设置底部外边距，精准控制项与项之间的间距
3. 清除图片浮动带来的父元素高度塌陷问题，确保每个列表项的内容被完整包裹

修改后的代码示例 #

HTML部分

<li class="list-item">
  <h5>Artificial intelligence (AI)</h5>
  <p class="content">
    <img src="AI.jpg" alt="AI相关图片" class="float-img">
    AI systems were limited in their capabilities, but recent advancements have propelled AI into the mainstream. Today, various AI models power virtual assistants, business process management, and advanced data analytics. In just a short period, AI is predicted to become an integral part of our lives.
  </p>
</li>
<li class="list-item">
  <!-- 下一个列表项内容 -->
</li>

CSS部分

/* 控制列表项之间的间距 */
.list-item {
  margin-bottom: 2rem; /* 可根据需求调整间距大小 */
  overflow: hidden; /* 清除内部浮动，确保列表项包裹所有内容 */
}

/* 图片浮动与间距样式 */
.float-img {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 10px; /* 替代过时的hspace属性 */
  margin-bottom: 10px; /* 可选：给图片底部添加间距 */
}

/* 可选：优化段落文本可读性 */
.content {
  line-height: 1.6;
}

关键说明 #

• overflow: hidden用于解决列表项内部浮动元素（图片）导致的高度塌陷问题，确保每个列表项能完整包裹内容，避免下一个列表项的内容向上偏移。
• margin-bottom是控制列表项间距的标准方式，相比<br>更灵活，可随时通过CSS调整大小，无需修改HTML结构。
• 替换align="left"为float: left、hspace为margin-right，这是符合现代HTML规范的写法，实现样式与结构分离，便于后续维护。

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