等，默认会占据其父容器的整个宽度，并在其前后创建换行，使得后续元素从新的一行开始。而内联元素如、、等，则会尽可能地占据其内容所需的宽度，并允许其他内联元素在同一行显示。

当我们尝试将一个内联元素（如）和一个块级元素（如

）放在一起时，由于

的块级特性，它会自动换行，导致它们无法并排显示在同一行。为了解决这个问题，我们需要改变这些元素的默认布局行为。

使用CSS Flexbox实现水平排列

CSS Flexbox（弹性盒子）是一种一维布局模型，它提供了一种更有效的方式来布置、对齐和分配容器中项目空间。它是实现元素水平或垂直排列的强大工具。

核心原理： 通过将一个父容器设置为Flex容器，其直接子元素（Flex项目）将自动获得Flex布局的特性，我们可以轻松控制它们的排列方向、对齐方式和空间分配。

实现步骤与示例代码

要将多个HTML元素排列在同一行，我们只需以下两步：

1. 将所有需要并排显示的元素包裹在一个父容器中。 这个父容器将成为我们的Flex容器。
2. 为这个父容器应用Flexbox样式。 主要是设置display: flex和flex-direction: row。

以下是具体的HTML结构和CSS样式示例：

立即学习“前端免费学习笔记（深入）”；

HTML 结构：

Videoleap

Videoleap是一个一体化的视频编辑平台

下载

  
  
Local Time
  
  
Eastern Time

在这个例子中，我们创建了一个div元素，并为其添加了wrapper类。所有需要并排显示的和

元素都作为这个div的直接子元素。

CSS 样式：

.wrapper {
  display: flex;
  flex-direction: row;
  /* 可选：进一步控制对齐和间距 */
  align-items: center; /* 垂直居中对齐所有项目 */
  gap: 10px;           /* 项目之间添加间距 */
}

/* 针对p标签的额外样式，确保它不会独占一行 */
.disp {
  margin: 0; /* 移除p标签默认的外边距，防止影响布局 */
  padding: 0;
}

代码解析：

• display: flex;：这是将wrapper元素转换为Flex容器的关键属性。一旦一个元素被设置为display: flex，它的直接子元素就变成了Flex项目，并会尝试在一行内显示。
• flex-direction: row;：这个属性定义了Flex项目在Flex容器中的排列方向。row（默认值）表示项目将从左到右水平排列。其他可选值包括column（从上到下垂直排列）、row-reverse和column-reverse。
• align-items: center; (可选)：这个属性用于定义Flex项目在交叉轴（与flex-direction垂直的轴）上的对齐方式。当flex-direction为row时，交叉轴是垂直方向，center会使所有项目垂直居中对齐。
• gap: 10px; (可选)：这是一个简写属性，用于设置Flex项目之间的行和列间距。在这里，它会在所有水平排列的项目之间创建10像素的间距。
• .disp的样式：为了确保

  元素能够更好地融入Flex布局，通常建议移除其默认的margin，因为默认的margin可能会影响精确的布局控制。

通过上述设置，原本会换行的

元素现在会与元素一起，在.wrapper容器中水平并排显示。

注意事项与进阶

• 浏览器兼容性： Flexbox得到了现代浏览器的广泛支持。对于需要支持旧版浏览器的项目，可能需要考虑使用厂商前缀（如-webkit-flex）或提供备用方案。
• Flexbox的强大之处： 除了简单的水平排列，Flexbox还提供了丰富的属性来控制项目的对齐（justify-content、align-items）、尺寸（flex-grow、flex-shrink、flex-basis）、换行（flex-wrap）等，使其成为构建复杂布局的强大工具。
• 替代方案：display: inline-block： 在Flexbox出现之前，display: inline-block是实现元素并排显示的一种常见方法。它允许元素像内联元素一样在同一行显示，但同时具有块级元素的特性，可以设置宽度、高度和垂直外边距。然而，inline-block在处理垂直对齐和项目间距时往往比较麻烦，且容易受到空白符（whitespace）的影响。对于现代布局，Flexbox通常是更优、更灵活的选择。

总结

通过本教程，您应该已经掌握了如何利用CSS Flexbox将多个HTML元素高效地排列在同一行。核心在于将需要并排显示的元素包裹在一个父容器中，并为该容器设置display: flex;和flex-direction: row;。Flexbox不仅解决了传统块级元素换行的问题，更提供了一套强大而灵活的布局系统，是现代网页设计中不可或缺的技能。建议您进一步探索Flexbox的其他属性，以构建出更复杂、更具响应性的用户界面。