HTML 如何将两个 span 元素左右对齐

在本文中，我们将介绍如何使用 HTML 实现将两个 span 元素分别左右对齐的效果。首先，我们需要了解 span 元素的基本特点和属性。

阅读更多：HTML 教程

span 元素简介

span 元素是 HTML 中的行内元素，用于对文档中的一部分内容进行分组或样式设置。它没有特定的显示效果，也不会独占一行，常用于给文本部分添加特定样式或设置事件处理。

使用 CSS 实现左右对齐

要实现将两个 span 元素左右对齐的效果，我们可以利用 CSS 中的 float 属性和 clear 属性。

1. 使用 float 属性

float 属性用于设置元素的浮动方向，常用值有 left 和 right。我们可以将第一个 span 元素设置为 float: left;，将第二个 span 元素设置为 float: right;，从而实现左右对齐的布局。

示例代码如下：

<style>
    .left-span {
        float: left;
    }
    .right-span {
        float: right;
    }
</style>

<span class="left-span">左对齐元素</span>
<span class="right-span">右对齐元素</span>

2. 使用 clear 属性

为了防止后续元素受到浮动元素的影响，我们常常需要使用 clear 属性清除浮动。

示例代码如下：

<style>
    .left-span {
        float: left;
    }
    .right-span {
        float: right;
    }
    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<span class="left-span">左对齐元素</span>
<span class="right-span">右对齐元素</span>
<div class="clearfix"></div>