css中如何是两个元素水平

在CSS中，有多种方式可以使得两个元素水平，下面我们来介绍几个常用的方法。

.method1 {
  display: inline-block;
}

.method2 {
  float: left;
}

.method3 {
  flex: 1;
  display: flex;
}

第一种方法是将两个元素设置为inline-block，这样它们就会排布在同一行。但需要注意，如果这两个元素有margin或padding，则它们之间会产生不必要的空隙。

第二种方法是将其中一个元素设置为float:left。这样另一个元素就会自动填充其旁边的空间，从而实现水平排布。但同样需要注意，当两个元素高度不一致时，可能会出现排布错乱的情况。

第三种方法是使用flexBox布局。将它们的容器设置为display:flex，并使用flex:1来让它们平均占据容器的宽度。这种方法可以很好地解决高度不一的问题，但需要注意浏览器兼容性。