如何在 HTML 和 CSS 中并排排列元素？

如何对齐

元素并排？

并排对齐元素是 Web 开发中的常见任务。有多种方法可以实现这一目标，每种方法都有自己的优点和缺点。下面，我们将探讨一些最流行的方法：

浮动元素

;元素可以向左或向右浮动，允许它们彼此相邻对齐。这种方法很简单，并且在大多数情况下效果很好。但是，它可能会对页面上其他元素的布局产生意想不到的后果，因此谨慎使用此方法非常重要。

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

登录后复制

登录后复制

登录后复制

登录后复制

CSS：

.child-left {
  float: left;
}

.child-right {
  float: right;
}

登录后复制

内联块Display

并排对齐元素的另一种方法是将其显示属性设置为 inline-block。这将允许它们彼此并排流动，就像内联元素（例如文本或图片）。

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

登录后复制

登录后复制

登录后复制

登录后复制

CSS:

.child-left {
  display: inline-block;
}

.child-right {
  display: inline-block;
}

登录后复制

Flexbox

Flexbox 是一个功能强大的布局系统，提供了一种灵活且通用的方式来对齐元素。使用 Flexbox，您可以指定元素如何沿主轴（例如，水平或垂直）和横轴（例如，从左到右或从左到右）布局从右到左）。

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

登录后复制

登录后复制

登录后复制

登录后复制

CSS:

.parent {
  display: flex;
  flex-direction: row;
}

.child-left {
  flex-basis: auto;
}

.child-right {
  flex-basis: auto;
}

登录后复制

网格

CSS 网格是另一种布局系统，可用于并排对齐元素。网格提供了二维布局系统，允许您水平和垂直定位元素。

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

登录后复制

登录后复制

登录后复制

登录后复制

CSS:

.parent {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.child-left {
  grid-column: 1 / 2;
}

.child-right {
  grid-column: 2 / 3;

登录后复制

以上是如何在 HTML 和 CSS 中并排排列元素？的详细内容。更多信息请关注PHP中文网其他相关文章！