CSS：在同一行中将两个元素左右对齐（不使用浮动）

在本文中，我们将介绍如何使用CSS在同一行中将两个元素左右对齐，而不使用浮动。

阅读更多：CSS 教程

使用Flexbox（弹性盒布局）

Flexbox是一种直观且强大的CSS布局模型，可用于实现各种布局需求。通过使用Flexbox，我们可以轻松地将两个元素左右对齐。

首先，我们创建一个父容器，并将其设置为Flexbox布局模型：

.container {
  display: flex;
}

接下来，我们可以定义两个子元素，一个放置在左侧，一个放置在右侧：

.left-element {
  flex: 1;
}

.right-element {
  flex: 1;
}

在这个例子中，我们给每个元素都设置了flex属性为1，这意味着它们将平均占用父容器的剩余空间。如果你希望它们按照确定的比例分配空间，可以调整flex属性的值。

完整的示例代码如下：

<div class="container">
  <div class="left-element">左侧元素</div>
  <div class="right-element">右侧元素</div>
</div>

Grid布局是另一个强大而灵活的CSS布局模型，也可以实现将两个元素左右对齐的效果。

首先，我们创建一个父容器，并将其设置为Grid布局模型：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

在这个例子中，我们使用grid-template-columns属性将父容器分为两个等宽的列。

接下来，我们可以定义两个子元素，并分别将其放置在左侧和右侧：

.left-element {
  grid-column: 1;
}

.right-element {
  grid-column: 2;
}

在这个例子中，我们使用grid-column属性将左侧元素放置在第1列，右侧元素放置在第2列。

完整的示例代码如下：

<div class="container">
  <div class="left-element">左侧元素</div>
  <div class="right-element">右侧元素</div>
</div>

除了Flexbox和Grid布局，我们还可以使用绝对定位来实现将两个元素左右对齐的效果。

首先，我们创建一个父容器，并将其设置为相对定位：

.container {
  position: relative;
}

接下来，我们可以定义两个子元素，并将其设置为绝对定位：

.left-element {
  position: absolute;
  left: 0;
}

.right-element {
  position: absolute;
  right: 0;
}

在这个例子中，我们使用left属性将左侧元素放置在父容器的左侧，使用right属性将右侧元素放置在父容器的右侧。

完整的示例代码如下：

<div class="container">
  <div class="left-element">左侧元素</div>
  <div class="right-element">右侧元素</div>
</div>

通过使用Flexbox、Grid布局或绝对定位，我们可以轻松实现将两个元素左右对齐的效果，而不使用浮动。每种方法都有其各自的优点和适用场景，你可以根据具体需求选择使用哪种方法。希望这篇文章对你的CSS布局工作有所帮助！