一般情況下,我們使用CSS創建列表時,每個列表項的寬度是不一樣的。但是,有時我們需要將列表的寬度平分,讓每個列表項的寬度相同。下面,我們來學習如何使用CSS平分列表寬度。
/* 先將列表樣式設置為無,去除默認樣式 */ ul { list-style: none; padding: 0; margin: 0; } /* 設置每個列表項寬度為平分 */ li { width: calc(100% / 3); /* 3代表列表項的數量,根據實際情況修改 */ box-sizing: border-box; /* 避免因邊框或內邊距導致寬度溢出 */ float: left; /* 使每個列表項左浮動 */ } /* 最后一個列表項清除浮動 */ li:last-child { float: none; clear: both; }
上述代碼中,calc(100% / 3)
指的是將整個列表寬度平分為3等份。如果列表項數量為4,可以將100%改為25%。
通過以上CSS代碼,我們可以輕松實現列表寬度平分的效果。希望這篇文章能夠對大家有所幫助。