CSS 可以通過選擇符控制 LI 列表的最后一行顯示的方式。
ul { display: table; width: 100%; } li { display: table-cell; width: 30%; text-align: center; vertical-align: middle; } li:last-child { width: auto; display: inline-block; }
以上代碼將 ul 的 display 屬性設置為 table,使 LI 行為表格單元格。然后使用 display: table-cell 屬性將表格單元格設為內聯塊級元素,LI 元素將以一定比例填充行空間。
但是最后一行,可能只有一兩個元素,為了避免它們過度拉伸沾滿整個行,我們可以通過選擇器 li:last-child 將最后一個 LI 元素設為寬度自動撐滿,同時使用 display: inline-block 將它變成塊級元素并與之前的 LI 元素分開。