在網(wǎng)頁設(shè)計中，數(shù)字的展示方式無疑是非常關(guān)鍵的一部分。而在 CSS3 中提供的數(shù)字橫排樣式，可以很好地改變數(shù)字的排列方式，使得數(shù)字更加美觀、實用。下面就來學(xué)習(xí)一下 CSS3 數(shù)字橫排的樣式吧！

/*設(shè)置數(shù)字橫排的樣式*/
.wrapper {
display: flex; /*flex布局*/
flex-direction: row-reverse; /*reverse方式排列*/
justify-content: flex-start; /*左對齊*/
align-items: center; /*上下對齊*/
}
.wrapper >div {
display: inline-block; /*內(nèi)聯(lián)塊級元素*/
background-color: #f5f5f5; /*設(shè)置背景色*/
padding: 10px; /*設(shè)置內(nèi)邊距*/
font-size: 24px; /*設(shè)置字體大小*/
font-weight: bold; /*設(shè)置字體粗細(xì)*/
margin-right: 10px; /*設(shè)置右間距*/
border-radius: 3px; /*設(shè)置圓角*/
}

通過上述的 CSS3 樣式設(shè)置，數(shù)字可以橫排顯示，還可以通過設(shè)置 flex 布局中的屬性，實現(xiàn)不同的橫排效果，讓網(wǎng)頁更加美觀實用。