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

在本文中，我们将介绍如何使用 HTML 和 CSS 来实现将两个 span 元素居左和居右对齐的方法。

阅读更多：HTML 教程

使用 CSS 的 float 属性

CSS 的 float 属性可以用于控制元素在页面中的浮动位置。通过将一个 span 元素设置为左浮动，另一个 span 元素设置为右浮动，我们可以实现将它们居左和居右对齐的效果。

下面是一个示例代码：

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

<body>
    <span class="left-align">左对齐</span>
    <span class="right-align">右对齐</span>
</body>

在上面的代码中，我们首先定义了两个 CSS 类名 .left-align 和 .right-align，并将 float 属性分别设置为 left 和 right。然后，在 HTML 中使用这些类名分别给两个 span 元素添加样式。

运行以上代码，你会发现两个 span 元素被分别居左和居右对齐了。

使用 Flexbox 布局

Flexbox 是一种用于页面布局的强大工具，可以轻松实现元素的对齐和布局。使用 Flexbox，我们可以很方便地将两个 span 元素居左和居右对齐。

下面是一个使用 Flexbox 布局的示例代码：

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }
</style>

<body>
    <div class="container">
        <span>左对齐</span>
        <span>右对齐</span>
    </div>
</body>

在这个示例中，我们首先创建了一个包含两个 span 元素的容器 <div class="container">，并给它添加了 display: flex 的样式。然后，我们使用 justify-content: space-between 来将两个 span 元素分别对齐到容器的两端。

运行以上代码，你会发现两个 span 元素分别被居左和居右对齐了。

使用表格布局

表格布局是另一种将元素对齐到页面两侧的方法。虽然表格布局在现代页面布局中不常使用，但对于简单的对齐需求来说，它仍然是一种有效的方法。

下面是一个使用表格布局的示例代码：

<style>
    table {
        width: 100%;
    }
    td {
        text-align: left;
    }
    td.right-align {
        text-align: right;
    }
</style>

<body>
    <table>
        <tr>
            <td>左对齐</td>
            <td class="right-align">右对齐</td>
        </tr>
    </table>
</body>

在上面的代码中，我们创建了一个包含一个表格行的表格，并将表格的宽度设置为100%。然后，我们使用 text-align 属性分别将内容对齐到左侧和右侧。

运行以上代码，你会发现两个 span 元素被分别居左和居右对齐了。