情況: 父級(jí)元素設(shè)置justify-contnet:space-around,設(shè)置元素的寬度為30%,如果元素不足3或者尾行不足三個(gè),樣式會(huì)不符合預(yù)期.
結(jié)構(gòu):
ul > li*5,圖從網(wǎng)上隨便找的,湊合一下就可以
這里通過設(shè)置最后一個(gè)元素的margin-right來實(shí)現(xiàn).
ul li:nth-child {margin-right:auto;}
這樣就皆大歡喜了,其實(shí)沒有什么鳥用.如果沒有主動(dòng)設(shè)置子元素li的外邊距,那么樣式依舊是錯(cuò)的.我這里li的寬度是30%,所以我給每個(gè)li都設(shè)置了margin:0 1.5%;實(shí)現(xiàn)了效果,最后一個(gè)li的margin-right:auto.不知道什么原理,反正實(shí)現(xiàn)了.另外就是網(wǎng)上還有設(shè)置ul:after:{content:'';width:30%;}的方式實(shí)現(xiàn),其實(shí)就是自動(dòng)向后添加空元素而已,需要js配合,效果不是很好.
