[分享]css两个%3cspan%3e左右分开

在CSS中，有时候需要把两个 标签左右分开，这时候可以使用 float 属性。首先，为了能够让两个 横向排列，在CSS中需要对 display 属性进行定义。可以使用 inlineblock，也可...

在CSS中，有时候需要把两个

<span>

标签左右分开，这时候可以使用

float

属性。

首先，为了能够让两个

<span>

横向排列，在CSS中需要对

display

属性进行定义。可以使用

inline-block

，也可以使用

float

。

span {
  display: inline-block;
  /* 或者 */
  float: left;
} 

接下来，需要对左右两边的

<span>

进行定位。如果使用

display: inline-block

，可以使用

text-align

或者

flexbox

。如果使用

float

，则需要使用

clear

。

/* display: inline-block */
.container {
  text-align: center;
}
.container .left {
  text-align: left;
}
.container .right {
  text-align: right;
}

/* 或者 */
.container {
  display: flex;
  justify-content: center;
}
.container .left {
  margin-right: auto;
}
.container .right {
  margin-left: auto;
}

/* float */
.container .left {
  float: left;
  clear: both;
}
.container .right {
  float: right;
  clear: both;
} 

以上就是实现左右分开的方法。