CSS中橫排顯示主要是指把元素放在同一行顯示，而不是默認(rèn)垂直顯示，這樣可以充分利用屏幕空間，也可以使頁(yè)面更加美觀和易于操作。

/* 橫排顯示的通用樣式 */
.horizontal-display {
display: flex; /* 采用flex布局 */
flex-wrap: nowrap; /* 不換行 */
justify-content: space-between; /* 等間距分布 */
align-items: center; /* 居中對(duì)齊 */
}

上面代碼中的flex布局是實(shí)現(xiàn)橫排顯示的關(guān)鍵，其中的參數(shù)意義如下：

• display: flex; 表示采用flex布局，將容器中的子元素放在一行上；
• flex-wrap: nowrap; 表示不換行，保證所有元素放在同一行上；
• justify-content: space-between; 表示等間距分布，讓子元素之間的距離相等；
• align-items: center; 表示居中對(duì)齊，讓子元素在容器中居中對(duì)齊。

下面我們來(lái)看一個(gè)具體的例子：

<div class="horizontal-display">
<p>第一個(gè)元素</p>
<p>第二個(gè)元素</p>
<p>第三個(gè)元素</p>
</div>

上面的html代碼表示將三個(gè)p標(biāo)簽放在同一行上，通過(guò)添加.horizontal-display樣式，即可實(shí)現(xiàn)橫排顯示。

CSS中的橫排顯示還有很多細(xì)節(jié)和技巧，如可以通過(guò)添加padding和margin值進(jìn)行調(diào)整，使用伸縮盒子模型實(shí)現(xiàn)更加復(fù)雜的布局等等。多加練習(xí)和實(shí)踐，可以更好地掌握CSS中橫排顯示的技巧和奧秘。