CSS3是一種用于定義網頁樣式的樣式表語言，提供了許多新的特性來豐富網頁設計，其中有一個很實用的功能就是有序列表橫向排序，下面來介紹一下如何實現。
首先，在HTML中我們可以使用ol標簽定義有序列表，而在CSS中，我們可以使用display屬性來改變它的顯示方式。在這個例子中，我們將列表的顯示方式設置為flex，這樣它就可以變成一行排列。
ol {
display: flex;
list-style: none;
}在上面的代碼中，我們還將列表樣式設置為none，這樣就可以去除默認的有序標記。
接下來，我們可以使用flex屬性來控制列表項的布局。在這個例子中，我們將列表項設置為水平居中對齊，并且設置了一些間距和邊框樣式。li {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
margin: 0 10px;
border: 1px solid black;
}最后，我們可以在每個列表項中添加內容，并使用CSS來修改它們的樣式。在這個例子中，我們將文本顏色設置為白色，并將背景顏色設置為藍色。li:nth-child(1) { background-color: blue; }
li:nth-child(2) { background-color: red; }
li:nth-child(3) { background-color: green; }
li:nth-child(4) { background-color: yellow; }
li span {
color: white;
font-size: 24px;
font-weight: bold;
}在上面的代碼中，我們使用了nth-child選擇器來為每個列表項添加不同的背景色。同時，我們還將每個列表項中的文本設置為白色，并設置了一些文本樣式來使其更加突出。
最終效果如下圖所示：