建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我是前端西瓜哥。
創(chuàng)新互聯(lián)專(zhuān)注骨干網(wǎng)絡(luò)服務(wù)器租用十年，服務(wù)更有保障！服務(wù)器租用，重慶服務(wù)器托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專(zhuān)屬高性能服務(wù)器。
前段時(shí)間實(shí)現(xiàn)了個(gè)自定義無(wú)序列表樣式，踩了一些坑，和大家說(shuō)說(shuō)。
設(shè)計(jì)師說(shuō)我們這個(gè)，列表項(xiàng)樣式要優(yōu)化一下，太丑了，這個(gè)原點(diǎn)要大一點(diǎn)。
默認(rèn)的無(wú)序列表樣式是這樣的。
- 我是第一行。
- 你是第二行你是第二行你是第二行你是第二行你是第二行
- 三
雖然覺(jué)得有點(diǎn)花里胡哨，但我還是去研究了，看看怎么給圓點(diǎn)變大一點(diǎn)。
::before
我們先將 li 原有的圓點(diǎn)去掉，通過(guò)給 li 加上 list-style: none; 的方式。
然后用 ::before 給 li 前面創(chuàng)建一個(gè)偽元素，加上圓點(diǎn)字符。
ul {
/* ... */
/* 稍微調(diào)整一下 ul 的左邊距 */
padding-inline-start: 20px;
}
li {
list-style: none;
}
li::before {
/* 這里加兩個(gè)空白符作為邊距 */
/* 你也可以用 margin-right */
content: "\2022 ";
font-size: 22px;
}這里我給 content 的值末尾加了兩個(gè)空格符，來(lái)實(shí)現(xiàn)右邊距效果。你也可以用 margin-right 來(lái)做，更正規(guī)一些。
注意點(diǎn)：這里 content 的值最好用轉(zhuǎn)義字符，不要用原字符，因?yàn)槲野l(fā)現(xiàn)在某些瀏覽器會(huì)亂碼。
圓點(diǎn)沒(méi)和文字水平居中對(duì)齊，我們用 transform 微調(diào)一下位置。
需要注意的一點(diǎn)是，transform 對(duì)行內(nèi)元素(display: inline)無(wú)效。而 ::before 偽元素默認(rèn)為行內(nèi)元素，需要手動(dòng)改為 inline-block。
完整寫(xiě)法為：
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 20px;
}
li {
list-style: none;
}
li::before {
content: "\2022 ";
display: inline-block;
font-size: 22px;
transform: translateY(3px);
}
設(shè)計(jì)師很滿意地離開(kāi)了。
但過(guò)了幾天，他發(fā)現(xiàn)有些不對(duì)勁，又跑過(guò)來(lái)和我說(shuō)：不對(duì)，這個(gè)換行的文字起始位置不應(yīng)該在圓點(diǎn)下邊，而是應(yīng)該和第一行文字左側(cè)對(duì)齊，也就是應(yīng)該像下面這樣。
::before + 絕對(duì)定位
問(wèn)題不大，馬上改。
將 ::before 偽元素設(shè)置為絕對(duì)定位，讓圓點(diǎn)脫離正常文檔流。這次我們用 left 來(lái)調(diào)整位置。
完整的寫(xiě)法為：
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 40px;
}
li {
position: relative;
list-style: none;
}
li::before {
content: "\2022 ";
position: absolute;
left: -11px;
display: inline-block;
font-size: 22px;
}效果很完美，設(shè)計(jì)師很滿意地離開(kāi)了。
list-style-type 和 ::marker
如果你不需要修改圓點(diǎn)大小，而是想替換為其他符號(hào)，還用一種寫(xiě)法是使用 list-style-type 或 ::marker。
list-style-type 用在 ul 元素上。
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 20px;
list-style-type: "\2708"; /* 飛機(jī)符號(hào) */
}然后我們看到原點(diǎn)變成了飛機(jī)字符：
::marker 則是用在 li 元素上，可以讓不同的 li 使用不用樣式。
li::marker {
content: "\2708";
}更具體的寫(xiě)法這里就不展開(kāi)講了，讀者可以自行閱讀官方文檔。
但這種方案在修改圓點(diǎn)大小后，無(wú)法使用 transform 進(jìn)行位置的調(diào)整，所以我沒(méi)有用這個(gè)。
結(jié)尾
小小的無(wú)序列表自定義樣式也挺多門(mén)道的，希望對(duì)你有所幫助。
網(wǎng)頁(yè)名稱(chēng)：如何使用CSS自定義無(wú)序列表樣式
文章出自：http://www.5511xx.com/article/dphdipo.html
