[分享]css两个标签水平

在 CSS 中，有两个常用的标签可以用来实现水平布局：float 和 display:inline-block。

 /* float */
.box {
  float: left;
  width: 50%;
}

/* display:inline-block */
.box {
  display: inline-block;
  width: 50%;
  vertical-align: top;
} 

float 可以让元素浮动到页面的左侧或右侧，让其他内容围绕着它流动。通过设置元素的宽度为 50%，可以实现两个元素并排显示的效果。但是，需要注意的是，浮动元素会脱离文档流，可能会对其他元素产生影响。

display:inline-block 则可以使元素像行内元素一样排列，但是又具有块级元素的特性。通过设置元素的宽度为 50% 和 vertical-align:top，可以实现两个元素并排显示的效果。不过，display:inline-block 也有一些问题，比如会产生多余空格，需要使用 font-size:0 或者将两个元素放在同一行中。

综合来讲，float 和 display:inline-block 都可以用来实现水平布局，具体使用哪个要看具体情况。如果布局比较复杂，建议使用 flex 或 grid 布局，它们能够更方便和灵活地实现复杂布局。