在CSS中，我們可以使用多種方法來將子元素橫向排列，以下是一種簡單的方法，使用Flex布局來實現(xiàn)。

1、HTML結(jié)構(gòu)：

我們需要一個包含子元素的容器。

<div class="container">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
    <div class="child">子元素3</div>
    <!-- 可以根據(jù)需要添加更多子元素 -->
</div>

2、CSS樣式：

我們可以使用Flex布局來將這些子元素橫向排列。

.container {
    display: flex;
    justify-content: space-between; /* 子元素之間的間隔 */
}
.child {
    width: 200px; /* 子元素的寬度 */
    height: 100px; /* 子元素的高度 */
    margin: 10px; /* 子元素的外邊距 */
    background-color: #f0f0f0; /* 子元素的背景顏色 */
    text-align: center; /* 子元素的文字居中顯示 */
}

在這個例子中，我們使用了justify-content: space-between;來確保子元素之間的間隔均勻，你可以根據(jù)需要調(diào)整子元素的寬度、高度、外邊距和背景顏色等樣式。

3、響應式設計：

如果你希望這個布局在響應式設計中也能正常工作，那么你可能需要添加一些媒體查詢來確保在不同屏幕尺寸下子元素都能正確排列。

@media (max-width: 600px) {
    .container {
        flex-direction: column; /* 在小屏幕下，子元素垂直排列 */
    }
}

通過這種方式，你可以確保你的CSS布局在各種屏幕尺寸下都能提供***佳的用戶體驗。