[分享]css两个div盒子水平一条线

 div {
    display: inline-block;
    vertical-align: middle;
  } 

使用display: inline-block属性可以让两个盒子并排横放，而vertical-align:middle属性可以让它们在水平方向上对齐。此时，盒子之间就会有一条水平线将它们分隔开来。

下面是一个示例代码，我们在HTML中放置两个盒子，并添加上述CSS属性来实现水平对齐的效果。

 <div class="box-left"></div>
  <div class="box-right"></div>

  .box-left, .box-right {
    width: 50%;
    height: 100px;
    background-color: lightgray;
    display: inline-block;
    vertical-align: middle;
  }

  .box-left {
    background-color: lightblue;
  } 

如上代码所示，我们使用了50%的宽度，来使两个盒子平分页面的宽度。在CSS中设置它们的高度和背景颜色，再使用display: inline-block和vertical-align: middle属性来实现盒子的水平对齐。其中，box-left盒子的背景颜色是蓝色的，为了更好的区分两个盒子。

需要注意的是，当使用display: inline-block属性时，元素之间的换行符会产生空格，因此需要在HTML中将它们紧挨着放置或设置font-size为0。

总之，通过使用display: inline-block和vertical-align: middle属性，我们可以轻松地让两个