如何在同一行获取两个元素 html - CSS

有时，我们希望在 html 页面中的同一行展示两个元素，如何做到呢？在 CSS 中，有多种方法可以实现这个目的。

使用 Float 属性实现

Float 属性可以使元素脱离文档流，从而可以使两个元素在同一行展示。

.element1 {
  float: left;
}

.element2 {
  float: left;
}

<div class="element1">元素 1</div>
<div class="element2">元素 2</div>

上述代码中，两个元素都设置了 float: left 属性，从而实现了在同一行展示的效果。

使用 Flexbox 实现

Flexbox 是一种 CSS 布局方式，可以很方便地实现多种布局效果，包括同一行展示多个元素。

.container {
  display: flex;
}

.element1 {
  flex: 1;
}

.element2 {
  flex: 1;
}

<div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div>

上述代码中，.container 元素设置了 display: flex 属性，元素内部的 .element1 和 .element2 都设置了 flex: 1 属性，从而实现了平均分配容器内部空间的效果，使两个元素在同一行展示。

使用 Grid 实现

Grid 是另一种 CSS 布局方式，也可以很方便地实现多种布局效果，包括同一行展示多个元素。

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

.element1 {
  grid-column: 1 / 2;
}

.element2 {
  grid-column: 2 / 3;
}

<div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div>

上述代码中，.container 元素设置了 display: grid 和 grid-template-columns 属性，使两个元素平均分配容器内部空间，.element1 和 .element2 分别通过 grid-column 属性指定在哪一列展示。这样就可以实现在同一行展示的效果。

以上三种方法都可以实现在同一行展示多个元素的效果。开发者可以根据具体的布局需求选择合适的方法。