CSS 相邻的 SPAN 元素实现无 float 布局

在本文中，我们将介绍如何使用 CSS 实现相邻的 SPAN 元素在不使用 float 的情况下实现布局。

阅读更多：CSS 教程

使用 display: inline-block 属性

display 属性用于定义元素的显示类型。默认情况下，SPAN 元素是行内元素，会根据内容自动换行。为了让相邻的 SPAN 元素在同一行显示，我们可以使用 display: inline-block 属性。

.span1,
.span2 {
  display: inline-block;
}

上述代码中，我们通过定义类名为 span1 和 span2 的样式，将这两个 SPAN 元素设置为 inline-block。这样，无论这两个元素内容是否换行，它们都会在同一行显示。

<span class="span1">Hello,</span>
<span class="span2">world!</span>

在上面的 HTML 代码中，我们分别给两个 SPAN 元素添加了类名为 span1 和 span2，并且在 CSS 中定义了这两个类名的样式。这样一来，这两个 SPAN 元素就会相邻地显示在一起，而不会自动换行。

使用 white-space: nowrap 属性

另一种实现相邻的 SPAN 元素无需使用 float 布局的方法是使用 white-space: nowrap 属性。这个属性用于控制元素内的空白符是如何处理的。当设置为 nowrap 时，元素内容将不会换行，而是在同一行显示。

.container {
  white-space: nowrap;
}

上述代码中，我们给父容器添加了样式类名为 container，并将其 white-space 属性设置为 nowrap。

<div class="container">
  <span>Hello,</span>
  <span>world!</span>
</div>

在上面的 HTML 代码中，我们将两个 SPAN 元素包含在一个具有类名为 container 的 DIV 容器中。通过设置容器的 white-space 属性为 nowrap，这两个 SPAN 元素就会相邻地显示在一行，而不会自动换行。

使用 flexbox 布局

另一种实现相邻的 SPAN 元素无需使用 float 布局的方法是使用 flexbox 布局。flexbox 是一种弹性盒子布局模型，通过 flex 属性可以轻松地实现元素的排列和对齐。

.container {
  display: flex;
}

.container span {
  flex: 1;
}

上述代码中，我们给父容器添加了样式类名为 container，并将其 display 属性设置为 flex。接着，我们给 SPAN 元素添加了样式选择器，将其 flex 属性设置为 1。这样一来，父容器会自动将两个 SPAN 元素平均分配在一行上。

<div class="container">
  <span>Hello,</span>
  <span>world!</span>
</div>

在上面的 HTML 代码中，我们将两个 SPAN 元素包含在一个具有类名为 container 的 DIV 容器中。通过设置容器的 display 属性为 flex，并给 SPAN 元素设置 flex 属性，这两个 SPAN 元素就会相邻地显示在一行，而不会自动换行。

总结

通过本文的介绍，我们了解到了三种在不使用 float 的情况下实现相邻的 SPAN 元素布局的方法。我们可以使用 display: inline-block 属性将元素设置为行内块级元素，使用 white-space: nowrap 属性控制元素内的空白符处理方式，或者使用 flexbox 布局实现弹性盒子的排列和对齐。根据实际情况选择合适的方法，可以更好地满足网页布局的需求。