元素橫向輸出，代碼如下：

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

接下來，我們需要在css中為容器元素和每個子元素設(shè)置display屬性和float屬性，如下面所示：

.container {
display: flex;
}
.item {
float: left;
}

這樣，我們就成功地將三個元素橫向輸出了。通過將容器元素設(shè)置為flex，并將子元素設(shè)置為float:left，子元素就可以橫向顯示了。 上述代碼中我們使用了flex布局，flex布局是一種新的布局方式，在css中它有很多強大的屬性可以使用。例如，我們還可以通過設(shè)置justify-content屬性來控制子元素在容器內(nèi)的水平間距：

.container {
display: flex;
justify-content: space-between;
}

通過設(shè)置justify-content屬性為space-between，子元素之間會有等量的間距，從而讓布局更加美觀。 總之，通過display屬性和float屬性，我們可以實現(xiàn)簡單的橫向輸出。而通過flex布局，我們可以更加靈活地控制子元素的排列。