如何仅用HTML和CSS创建响应式并排优缺点区块

核心问题分析 #

你当前代码的问题出在两点：

1. 父容器.indent-1用了浮动，但内部子元素也都是浮动，导致父容器高度塌陷，内容失去约束出现重叠。
2. 列表ul自带默认内边距，和标题h3没有对齐，视觉上显得混乱。

修复代码（解决重叠+对齐问题） #

HTML（保留原有结构，仅给子区块加类名方便样式控制）

<section class="indent-1">
  <section class="pros">
    <h3>What we like:</h3>
    <ul>
      <li>Pro 1</li>
      <li>Pro 2</li>
      <li>Pro 3</li>
    </ul>
  </section>
  <section class="cons">
    <h3>What we don't like:</h3>
    <ul>
      <li>Con 1</li>
      <li>Con 2</li>
      <li>Con 3</li>
    </ul>
  </section>
</section>

CSS（修复核心问题）

/* 父容器清除浮动，避免高度塌陷，同时调整内边距让内容不贴边 */
.indent-1 {
  border: 2px solid orange;
  border-radius: 5px;
  padding: 20px;
  overflow: hidden; /* 清除内部浮动，让父容器包裹子元素 */
}

/* 子区块平分宽度，留间距避免挤在一起 */
.indent-1 section {
  float: left;
  width: calc(50% - 20px);
  margin-right: 20px;
}

/* 去掉最后一个区块的右边距 */
.indent-1 section:last-child {
  margin-right: 0;
}

/* 统一标题和列表的对齐样式 */
h3 {
  margin-top: 0; /* 去掉标题默认上边距，和容器顶部对齐 */
}

ul {
  padding-left: 20px; /* 调整列表内边距，让项目符号和标题左对齐 */
  margin: 10px 0 0; /* 标题和列表之间留间距 */
}

美化建议（贴近Lifehacker风格） #

1. 添加视觉标识：用伪元素给优点/缺点加图标，增强辨识度

.pros li::before {
  content: "✓";
  color: #2ecc71;
  margin-right: 8px;
}

.cons li::before {
  content: "✗";
  color: #e74c3c;
  margin-right: 8px;
}

2. 优化配色与字体：调整边框色、背景色，让风格更清爽

.indent-1 {
  border-color: #f39c12;
  background-color: #fff9e6; /* 浅橙色背景，突出区块 */
  font-family: Arial, sans-serif;
}

h3 {
  color: #2c3e50;
  font-size: 1.2em;
}

li {
  color: #34495e;
  line-height: 1.6; /* 增大行高，提升可读性 */
}

3. 响应式适配：小屏幕下自动堆叠，避免挤在一起

@media (max-width: 600px) {
  .indent-1 section {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .indent-1 section:last-child {
    margin-bottom: 0;
  }
}

4. 细节优化：添加hover效果，增强交互感

li:hover {
  color: #f39c12;
  cursor: default;
}

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