hEH28資訊網——每日最新資訊28at.com

一、需求分析，問題描述

1、需求

詳情頁有許多文字，在每一行文字前都添加一個黑色實心小圓點，并且要保持與黑色標題左對齊。hEH28資訊網——每日最新資訊28at.com

hEH28資訊網——每日最新資訊28at.com

2、問題

• 有哪些方式添加黑色實心小圓點？各有什么優缺點？
• 怎樣讓黑色實心小圓點與后面的文字保持垂直居中對齊？

二、解決問題，答案速覽

1、如果公司有UI切圖

如果有切圖，這是最高效、最靈活的實現方式，只需一個img元素扔上去，然后讓圖標和后面的文字垂直水平居中即可。hEH28資訊網——每日最新資訊28at.com

這種方式不僅可以添加黑色實心小圓點，還可以加任意形狀的圖標，不過前提是要有人給你切圖。hEH28資訊網——每日最新資訊28at.com

<ul class="blackText">  <li>      <img class="xingIcon" src="images/PromotionIcon.png">      <span class="va-middle">The</span>  </li>  <li>     <img class="xingIcon" src="images/PromotionIcon.png">     <span class="va-middle">The</span>  </li></ul>

.xingIcon{  width: 8px;  height: 8px;  vertical-align: middle;  margin-right: 10px;}.va-middle{  vertical-align: middle;}

hEH28資訊網——每日最新資訊28at.com

2、如果公司沒有UI切圖

如果沒有人給你切圖，那只能老老實實自己畫了。這里最高效的當然是使用ul元素的list-style-type屬性，加上此屬性，輕輕松松添加黑色小圓點，還能整個空心的。注意要往左邊縮進1rem距離。hEH28資訊網——每日最新資訊28at.com

<ul class="feature-list">  <li>App Functions</li>  <ul>      <li>App Functions</li>      <li>App Functions</li>  </ul>  <li>App Functions</li><ul>

.feature-list {  font-weight: 400;  color: @black-color;  font-size: 16px;  line-height: 30px;  margin-left: 1rem;  list-style-type: disc;  ul{    margin-left: 1rem;    list-style-type: circle;  }}

hEH28資訊網——每日最新資訊28at.com

三、問題解析，知識總結

1、有哪些方式添加黑色實心小圓點？各有什么優缺點？

（1）切圖+img元素

最高效、最靈活的方式，不過需要有人切圖。hEH28資訊網——每日最新資訊28at.com

（2）使用ul元素的list-style-type屬性

高效，不過不太不靈活，只適用于實心圓、空心圓、實心方塊形狀的圖標。hEH28資訊網——每日最新資訊28at.com

具體list-style-type屬性值如下圖：hEH28資訊網——每日最新資訊28at.com

hEH28資訊網——每日最新資訊28at.com

（3）使用偽元素::before或::after

在需要加點的元素上添加一個偽元素，設置它的content屬性為/002B，再設置背景顏色和圓角，最后將它的位置和大小調整到恰當的位置即可。這個方式操作比較繁瑣，有點花里胡哨。hEH28資訊網——每日最新資訊28at.com

li::before {content: "/002B";background-color: black;border-radius: 50%;display: inline-block;height: 8px;width: 8px;margin-right: 8px;}

2、怎樣讓黑色實心小圓點與后面的文字保持垂直居中對齊？

• 將小圓點和文字整成行塊元素或行元素，然后給兩者都加上vertical-align: middle;屬性。
• 用margin屬性生頂。
• 用flex布局。

本文鏈接：http://www.www897cc.com/showinfo-26-24300-0.htmlCSS問題：如何在一行文字前添加黑色實心小圓點？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 掌握Python的高級函數：提升代碼的靈活性和可讀性

下一篇： Angular 開發中避免使用 If-else 結構的優秀實踐