CSS 可以很方便地讓盒子橫向排布，你可以嘗試使用以下方法：

/* 讓盒子在同一行橫向排布 */
.container {
display: flex;
flex-direction: row;
}
/* 讓盒子等分寬度 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 讓盒子居中排布 */
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
/* 讓盒子靠右排布 */
.container {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
/* 讓盒子右對齊 */
.container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}

上面的代碼可以解釋如下：

display: flex;將盒子轉換為彈性盒子，可以自由控制子元素的位置和排布方式。

flex-direction: row;設置主軸為水平方向，讓盒子橫向排布。

justify-content: space-between;讓子元素等分寬度，在子元素之間留有空隙。

justify-content: center;讓子元素居中排布。

justify-content: flex-end;讓子元素靠右排布。

align-items: flex-end;讓子元素底部對齊，可以在縱向方向上控制子元素的位置。