CSS 實現清單元素文字對齊

Jay
2 min readMar 12, 2020

針對 HTML ul li 去做客製化顏色改變,以及換行對其處理.

文章以步驟方式做起,最下面會附上程式碼.

▍起始

這是一開始的清單,現在需要改變他的清單項目圖示顏色並對齊在框框內.

▍改變清單項目圖示顏色

.lists {
list-style-type: none;
li {
color: green;
&:before {
width: 5px;
content: '•';
color: green;
display: inline-block;
}
}
}

這裡要完成變色須先把原本的 list-style-type 先隱藏,然後再利用 CSS 偽元素去製作一個清單項目圖示,就可以實現去改變顏色.

接著可以發現清單項目從我們設置的 border 外變到裡面.

▍清單項目換行並對齊

為了達到換行效果,加了一點文字(二).

可以看到結果並不是很漂亮,要做到文字換行後對齊效果.

這裡為了讓文字對齊,加上了

.lists {text-indent: -5px;
}

如此一來完成對齊效果,但是清單項目圖示跑出去了(三),

所以我們加點 padding 即可以解決(四),並完成.

.lists {text-indent: -5px;
padding-left: 15px;
}

▍程式原始碼

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Jay
Jay

Written by Jay

用簡單好懂都方式隨手筆記開發上遇到的問題或是好的工具,隨便找找可能會發現你需要的東西。

No responses yet

Write a response