【手記】理想的網頁列表效果

我理想的列表是這樣的：

即①前導符號要與前後段落對齊；②item間要懸掛對齊

單純用ul/ol的list-style-position是搞不掂的，inside是可以讓整個列表區塊與段落對齊，但會失去項間懸掛對齊效果；outside倒是懸掛對齊了，但前導符又超出正常範圍了，倒是可以給ul加margin-left使之縮進來，但具體縮多少能剛好對齊前後段落，沒個準數，而且不同設備不同字體都容易走樣，所以這不是理想的辦法。今天在逛一個網站時留意到它的列表效果很理想，於是扒了一招，要點：

ul {
    padding: 0;
    /* border-spacing: 0 0.5em;    調整item間距 */
}

li:before {
    content: "\2022\00a0\00a0"; /* 利用before插入前導符及空格 */
    display: table-cell;        /* 使前導符部分作為一個單元格 */
}

li {
    display: table-row;         /* 使每個item作為一個行 */
}

原理就是自製前導符，然後利用table-cell/row的組合，使前導符與項內容屬於不同的“列“，自然就雙雙對齊了，有序列表用counter搞掂。需要註意的是，用了table-xxx後，要想調整item間距，不能再用margin，無效，得用border-spacing。題外，ul預設的實心圓符號disc，既不是\2022，也不是\25cf，還請知道的大佬告知正確的unicode編碼。

效果一覽：https://codepen.io/ahdung/pen/eKOadx

- EOF -