如何用HTML和CSS实现目标div布局？问题排查与修正方案

架构老林

2026-7-14

问题解决

问题根源

宽度溢出：你给.child设置了固定宽度460px，同时又加了margin-left:20px和margin-right:20px，每个.child实际占据的总宽度是460+20+20=500px，远超过父容器能提供的横向空间，导致元素被迫换行。
inline-block空白问题：inline-block元素之间默认存在空白间距，进一步挤压了可用空间，加剧了换行问题。
布局结构错误：.buttons-container没有纳入和前两个.child的统一布局控制，所以会单独占据一行。

正确实现代码

推荐使用Flexbox布局来实现，它能轻松解决上述问题，代码如下：

CSS 代码

/* 父容器用Flex实现横向布局，子元素垂直居中 */
.parent {
  display: flex;
  align-items: center;
  gap: 20px; /* 控制子元素之间的间距，替代margin更直观 */
  padding: 20px; /* 可选，给整体加内边距更美观 */
}

/* 让两个.child平分父容器的可用宽度 */
.child {
  flex: 1;
}

/* 按钮容器内部也用Flex排列按钮 */
.buttons-container {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}

HTML 代码

<div class='parent'>
  <div class='child'>
    <button>button1</button>
  </div>

  <div class='child'>
    <button>button2</button>
    <button>button2</button>
    <button>button2</button>
    <button>button2</button>
    <button>button2</button>
  </div>

  <div class="buttons-container">
    <button>previous</button>
    <button>Next</button>
  </div>
</div>