CSS3中,可以使用flex布局或者grid布局來讓li填滿ul。
1、flex布局:
通過給ul設(shè)置display: flex;屬性,可以讓ul成為flex容器,然后給li設(shè)置flex: 1;屬性,可以讓li填滿ul。
<ul style="display: flex;"> <li style="flex: 1;">1</li> <li style="flex: 1;">2</li> <li style="flex: 1;">3</li> </ul>
2、grid布局:
通過給ul設(shè)置display: grid;屬性,可以讓ul成為grid容器,然后給li設(shè)置grid-area: auto;屬性,可以讓li填滿ul。
<ul style="display: grid;"> <li style="grid-area: auto;">1</li> <li style="grid-area: auto;">2</li> <li style="grid-area: auto;">3</li> </ul>
兩種方法都可以實現(xiàn)讓li填滿ul的效果,可以根據(jù)具體需求選擇使用哪種布局方式。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。