在編寫網頁布局時，經常會涉及到多個<span>元素的對齊問題。下面我們來介紹幾種實現多個<span>對齊的 CSS 技巧。

1. 使用 display: flex

.container {
display: flex;
justify-content: space-between;
}
.container span {
flex-basis: 30%;
}

以上代碼將 span 元素放在具有display: flex的容器中，然后使用justify-content: space-between屬性使各個<span>之間分布對齊。通過調整flex-basis屬性的值，可以控制<span>的寬度。

2. 使用 float

.container {
width: 100%;
}
.container span {
width: 30%;
float: left;
}

以上代碼將每個<span>元素的寬度設置為 30%，然后使用float: left讓它們左浮動，最終實現水平分布對齊的效果。

3. 使用 text-align

.container {
text-align: justify;
}
.container::after {
content: '';
display: inline-block;
width: 100%;
}
.container span {
display: inline-block;
}

以上代碼將容器的text-align屬性設置為justify，并在容器的末尾添加一個::after偽元素以強制對齊。在子元素<span>中添加display: inline-block，以使它們成為可塊元素，并對齊。