应使用 display: flex 实现水平排列，而非 position: absolute；因后者不适用于多元素布局，会导致响应式失效、数量变化难适配及定位基准错乱，而 flex 通过 justify-content 等属性简洁可靠地解决这些问题。

直接用 display: flex，别折腾 position: absolute 去手动算 left 值——除非你真需要脱离文档流。

为什么不用 position: absolute 水平排列多个元素？

因为这不是它的设计用途。绝对定位适合单个模态框、提示层这类“脱离上下文”的场景；想排一串按钮、图标或卡片，硬用 left: 20px、left: 120px 等写死值，会立刻遇到三个问题：

• 响应式失效：宽度变化时所有 left 值都要重调
• 数量不固定时无法动态适配（比如从 3 个变成 5 个）
• 父容器没设 position: relative，left 就会相对于 viewport 计算，布局错乱

justify-content 控制水平对齐，但必须配合 display: flex

只写 justify-content: center 是无效的，它只在 flex 容器里起作用。正确写法是：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.container {
  display: flex;
  justify-content: space-between; /* 或 center / flex-end / space-evenly */
}

注意点：

• justify-content 只影响主轴（默认是水平方向），别和 align-items 混用
• 如果子元素太多挤不下，默认不换行，得加 flex-wrap: wrap
• IE10+ 支持良好，但 IE10/11 需要 -ms- 前缀（如 -ms-flex-pack: center）

浮动和 inline-block 还能用吗？

能，但没必要。它们的问题不是“不能用”，而是维护成本高：

• float: left 必须清浮（overflow: hidden 或伪元素），否则父容器塌陷
• display: inline-block 会因 HTML 换行产生空隙，得靠 font-size: 0 或负 margin 补救
• 两者都不支持真正的垂直居中或等距分布（比如 space-between）

真正容易被忽略的是：flex 容器必须有明确的宽度或包裹逻辑，否则在某些嵌套场景下（比如子元素是 position: absolute 的后代），justify-content 可能看似不生效——不是属性错了，是父容器没形成有效 flex formatting context。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！