CSS中有一種常用的排版方式就是使用li標(biāo)簽來(lái)實(shí)現(xiàn)元素并排的效果。
ul { display: flex; justify-content: space-between; /*元素之間相距的間隔由父元素控制*/ } li { flex: 1; /*元素平均分配父元素的寬度*/ padding: 10px; background-color: #f6f6f6; text-align: center; }
以上代碼就是實(shí)現(xiàn)li標(biāo)簽并排的主要代碼,其中ul標(biāo)簽設(shè)置了flex布局,并控制了元素之間的間隔,li標(biāo)簽則通過(guò)flex屬性平均分配父元素的寬度,并且設(shè)置了一些樣式,比如背景顏色和居中對(duì)齊等。
通過(guò)這種方式可以實(shí)現(xiàn)多種排版效果,比如導(dǎo)航菜單、圖片集合、商品列表等。在使用時(shí)還需要根據(jù)具體需求進(jìn)行樣式的調(diào)整,比如文本大小、顏色、邊框等。
上一篇css3基本入門