CSS中的列表布局是設(shè)計網(wǎng)頁時常用的一種布局方式，它可以用來展示產(chǎn)品特性、服務(wù)清單等內(nèi)容。下面我們來介紹CSS中的列表布局公式。

ul {
list-style: none;  /* 去除列表項的默認(rèn)樣式 */
margin: 0;
padding: 0;
}
li {
display: flex;  /* 將列表項設(shè)為彈性盒子 */
align-items: center;  /* 將子項上下居中 */
margin-bottom: 10px;
}
span {
margin-left: 10px;
}

其中，通過設(shè)置ul元素的list-style為none，可以去除列表項的默認(rèn)樣式。接著，將li元素的display屬性設(shè)置為flex，可以將其轉(zhuǎn)化為彈性容器。

接下來，我們將li元素內(nèi)的子元素都設(shè)為inline-block，這樣可以讓它們排列在同一行。比如，下面的代碼:

圖標(biāo)名稱

最后，我們將span元素的margin-left設(shè)置為10px，讓它距離左側(cè)結(jié)構(gòu)體有一定距離。

綜上，以上CSS列表布局公式可以讓我們輕松地實現(xiàn)一個緊湊、有序的清單和適用于所有類型的產(chǎn)品列表。