[分享]css两个元素同一水平

当我们想要将两个元素放在同一水平线上时，可以使用CSS进行处理。下面我们介绍两种方法：

  .container {
            display: flex;
            justify-content: space-between;
        }
        .box {
            width: 100px;
            height: 50px;
        } 

方法一：使用Flexbox

Flexbox是CSS3中的一种布局方式，它可以轻松地控制元素的位置和间距。使用Flexbox可以将同一父元素下的子元素排列在同一行，使它们处于同一水平线上。可以通过以下代码实现：

  <div class="container">
            <div class="box">Box 1</div>
            <div class="box">Box 2</div>
        </div> 

其中，container为父元素，设置display为flex即可，子元素box的大小可以按需求设置。使用justify-content: space-between可以让子元素在水平方向上均匀分布。

  .box1 {
            float: left;
            width: 50%;
        }
        .box2 {
            float: right;
            width: 50%;
        } 

方法二：使用Float

使用float属性可以将两个元素排列在同一水平线上，方法是先将一个元素设置为左浮动，另一个元素设置为右浮动。可以通过以下代码实现：

  <div class="box1">Box 1</div>
        <div class="box2">Box 2</div> 

其中，box1和box2都设置了等宽的50%，然后通过float:left和float:right来控制它们在同一水平线上。