TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊
將其內(nèi)容放在span相對(duì)位置的，然后可以通過的left屬性控制空間span。
li span {
position: relative;
left: -10px;
}
<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span></li>
</ul>
TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊
在這里總結(jié)其他答案–如果您希望更好地控制<li>項(xiàng)目符號(hào)和列表項(xiàng)中文本之間的間距，則可以選擇：
（1）使用背景圖片：
<style type="text/css">
li {
list-style-type:none;
background-image:url(bullet.png);
}
</style>
<ul>
<li>Some text</li>
</ul>
好處：
您可以將任何圖像用作項(xiàng)目符號(hào)
您可以使用CSS background-position使用像素，ems或％將圖像定位在相對(duì)于文本的幾乎任何位置
缺點(diǎn)：
向頁面添加一個(gè)額外的（盡管很?。﹫D像文件，從而增加頁面的權(quán)重
如果用戶在其瀏覽器上增加了文本大小，則項(xiàng)目符號(hào)將保持原始大小。隨著文字大小的增加，它也可能會(huì)偏離原位
如果要僅使用百分比的寬度來開發(fā)“響應(yīng)式”布局，則可能難以在整個(gè)屏幕寬度范圍內(nèi)將子彈準(zhǔn)確地放置在所需位置
2.在<li>標(biāo)簽上使用填充
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
好處：
無圖像=少下載1個(gè)文件
通過調(diào)整上的填充<li>，您可以根據(jù)需要在項(xiàng)目符號(hào)和文本之間添加盡可能多的水平空間
如果用戶增加了文本大小，則間距和項(xiàng)目符號(hào)大小應(yīng)按比例縮放
缺點(diǎn)：
無法將項(xiàng)目符號(hào)比瀏覽器默認(rèn)值更靠近文本
限于CSS內(nèi)置項(xiàng)目符號(hào)類型的形狀和大小
項(xiàng)目符號(hào)必須與文本顏色相同
無法控制子彈的垂直位置
（3）將文字換成多余的<span>元素
<style type="text/css">
li {
padding-left:1em;
color:#f00; /* red bullet */
}
li span {
display:block;
margin-left:-0.5em;
color:#000; /* black text */
}
</style>
<ul>
<li><span>Some text</span></li>
</ul>
好處：
無圖像=少下載1個(gè)文件
你得到了子彈比選項(xiàng)的位置更多的控制（2） -你可以靠攏它的文字（盡管盡管我盡了最大努力，似乎你無法通過添加改變垂直位置padding-top的<span>其他人可能有。一個(gè)解決方法，不過...）
項(xiàng)目符號(hào)可以是與文本不同的顏色
如果用戶增加其文本大小，則項(xiàng)目符號(hào)應(yīng)按比例縮放（前提是您以ems而非px設(shè)置填充和邊距）
缺點(diǎn)：
需要額外的非語義元素（這可能會(huì)使您在SO上失去比在現(xiàn)實(shí)生活中更多的朋友；），但對(duì)于那些喜歡其代碼盡可能精簡(jiǎn)和高效的人來說很煩人，并且違反了表示和內(nèi)容的分離HTML / CSS應(yīng)該提供的內(nèi)容）
無法控制子彈的大小和形狀
這是希望CSS4中有一些新的列表樣式功能，因此我們可以創(chuàng)建更智能的項(xiàng)目符號(hào)，而無需使用圖像或exta標(biāo)記：）
舉報(bào)