在CSS中實(shí)現(xiàn)li兩列布局并不是一件難事,通常我們使用float、display、純CSS表格等方法來實(shí)現(xiàn)。
ul { list-style: none; margin: 0; padding: 0; } li { width: 45%; margin: 0 2.5%; float: left; }
以上代碼是使用float實(shí)現(xiàn)li兩列布局的例子,我們首先將ul的默認(rèn)樣式去掉,再讓li元素浮動,使用百分比為li設(shè)定寬度和間距,這樣就能夠讓li元素在父元素內(nèi)平分為兩列。
ul { display: table; table-layout: fixed; width: 100%; } li { display: table-cell; width: 50%; }
另一種實(shí)現(xiàn)方法是使用純CSS表格,同樣是讓li元素平分為兩列。我們將ul元素設(shè)定為表格布局模式,并使用fixed屬性來固定列寬度,然后將每個(gè)li元素設(shè)定為表格單元格即可。
無論是使用float還是純CSS表格,都可以輕松實(shí)現(xiàn)li兩列布局,需要根據(jù)不同的布局需求靈活選擇使用。
下一篇mui引入vue