[分享]css两元素再同一行

在前端开发中，有时候需要将两个元素放在同一行显示，这时候我们可以使用 CSS 来实现。 一种常见的做法是使用浮动（float）属性来将两个元素左右布局。如下代码所示： p { overflow: hi...

在前端开发中，有时候需要将两个元素放在同一行显示，这时候我们可以使用 CSS 来实现。
一种常见的做法是使用浮动（float）属性来将两个元素左右布局。如下代码所示：

p {
  overflow: hidden;
}
<br>
.left {
  float: left;
}
<br>
.right {
  float: right;
} 

上面代码中，我们使用了`overflow: hidden`属性来让父元素包裹子元素，防止出现高度塌陷（父元素高度为 0）的问题。同时通过给两个元素分别添加`float: left`和`float: right`属性，实现了左右布局的效果。
另一种做法是使用弹性布局（Flexbox）来实现。如下代码所示：

p {
  display: flex;
  justify-content: space-between;
}
<br>
.left, .right {
  flex: 1;
} 

上面代码中，我们使用了`display: flex`属性来将父元素设为弹性容器，再通过`justify-content: space-between`属性来让子元素沿着主轴均匀分布。同时通过给两个元素分别添加`flex: 1`属性，让它们在主轴方向上占据同样的空间。
以上就是两个元素在同一行显示的两种常见实现方式，具体使用时可以根据实际情况来选择适合自己的方法。