GiQ28資訊網(wǎng)——每日最新資訊28at.com

一、需求分析，問(wèn)題描述

1、需求

詳情頁(yè)有許多文字，在每一行文字前都添加一個(gè)黑色實(shí)心小圓點(diǎn)，并且要保持與黑色標(biāo)題左對(duì)齊。GiQ28資訊網(wǎng)——每日最新資訊28at.com

GiQ28資訊網(wǎng)——每日最新資訊28at.com

2、問(wèn)題

• 有哪些方式添加黑色實(shí)心小圓點(diǎn)？各有什么優(yōu)缺點(diǎn)？
• 怎樣讓黑色實(shí)心小圓點(diǎn)與后面的文字保持垂直居中對(duì)齊？

二、解決問(wèn)題，答案速覽

1、如果公司有UI切圖

如果有切圖，這是最高效、最靈活的實(shí)現(xiàn)方式，只需一個(gè)img元素扔上去，然后讓圖標(biāo)和后面的文字垂直水平居中即可。GiQ28資訊網(wǎng)——每日最新資訊28at.com

這種方式不僅可以添加黑色實(shí)心小圓點(diǎn)，還可以加任意形狀的圖標(biāo)，不過(guò)前提是要有人給你切圖。GiQ28資訊網(wǎng)——每日最新資訊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;}

GiQ28資訊網(wǎng)——每日最新資訊28at.com

2、如果公司沒(méi)有UI切圖

如果沒(méi)有人給你切圖，那只能老老實(shí)實(shí)自己畫(huà)了。這里最高效的當(dāng)然是使用ul元素的list-style-type屬性，加上此屬性，輕輕松松添加黑色小圓點(diǎn)，還能整個(gè)空心的。注意要往左邊縮進(jìn)1rem距離。GiQ28資訊網(wǎng)——每日最新資訊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;  }}

GiQ28資訊網(wǎng)——每日最新資訊28at.com

三、問(wèn)題解析，知識(shí)總結(jié)

1、有哪些方式添加黑色實(shí)心小圓點(diǎn)？各有什么優(yōu)缺點(diǎn)？

（1）切圖+img元素

最高效、最靈活的方式，不過(guò)需要有人切圖。GiQ28資訊網(wǎng)——每日最新資訊28at.com

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

高效，不過(guò)不太不靈活，只適用于實(shí)心圓、空心圓、實(shí)心方塊形狀的圖標(biāo)。GiQ28資訊網(wǎng)——每日最新資訊28at.com

具體list-style-type屬性值如下圖：GiQ28資訊網(wǎng)——每日最新資訊28at.com

GiQ28資訊網(wǎng)——每日最新資訊28at.com

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

在需要加點(diǎn)的元素上添加一個(gè)偽元素，設(shè)置它的content屬性為/002B，再設(shè)置背景顏色和圓角，最后將它的位置和大小調(diào)整到恰當(dāng)?shù)奈恢眉纯伞＿@個(gè)方式操作比較繁瑣，有點(diǎn)花里胡哨。GiQ28資訊網(wǎng)——每日最新資訊28at.com

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

2、怎樣讓黑色實(shí)心小圓點(diǎn)與后面的文字保持垂直居中對(duì)齊？

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

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 掌握Python的高級(jí)函數(shù)：提升代碼的靈活性和可讀性

下一篇： Angular 開(kāi)發(fā)中避免使用 If-else 結(jié)構(gòu)的優(yōu)秀實(shí)踐