几种常用的 CSS 横向布局方法

以下是几种常用的 CSS 横向布局方法，根据不同的需求选择最适合的方式：

方法 1：Flexbox 弹性盒子（推荐）
css
Copy Code
.container {
  display: flex;          /* 启用 Flexbox */
  gap: 20px;             /* 子元素之间的间距 */
  justify-content: start; /* 水平对齐方式 (start/center/space-between) */
  align-items: center;   /* 垂直对齐方式 */
}

.item {
  /* 子元素样式，宽度可自定义 */
  flex-shrink: 0;        /* 禁止子项收缩 */
}


优点‌：简单灵活，支持自动换行（flex-wrap: wrap）和动态调整间距。

方法 2：Grid 网格布局
css
Copy Code
.container {
  display: grid;
  grid-auto-flow: column; /* 横向排列 */
  grid-auto-columns: 1fr; /* 子项等宽 */
  gap: 20px;             /* 间距 */
}


优点‌：适合复杂布局，可精准控制列宽和行高。

方法 3：Inline-Block
css
Copy Code
.container {
  font-size: 0;          /* 消除 HTML 空格间隙 */
}

.item {
  display: inline-block;
  width: 100px;
  vertical-align: top;   /* 顶部对齐 */
  font-size: 16px;       /* 恢复字体大小 */
  margin-right: 20px;    /* 手动添加间距 */
}


注意‌：需手动处理元素间的默认空格间隙。

方法 4：浮动 (Float)
css
Copy Code
.item {
  float: left;          /* 横向排列 */
  width: 100px;
  margin-right: 20px;
}

.container::after {
  content: '';
  display: block;
  clear: both;          /* 清除浮动 */
}


注意‌：较老的技术，需处理高度塌陷问题。

方法 5：水平滚动布局
css
Copy Code
.container {
  white-space: nowrap;  /* 禁止换行 */
  overflow-x: auto;    /* 横向滚动 */
}

.item {
  display: inline-block;
  width: 200px;
  margin-right: 20px;
}


场景‌：适用于需要横向滚动的列表（如移动端导航）。

选择建议：
现代布局首选 Flexbox‌，代码简洁且功能强大。
需要精确控制行列时用 ‌Grid‌。
简单项目或兼容旧浏览器可考虑 ‌inline-block‌ 或 ‌float‌。

如果需要完整案例或进一步优化细节，请告诉我！