CSS刪除文本和列表樣式圖像之間的空白

對於我的ul列表項我添加了一張使用list-style-image屬性的圖片。CSS刪除文本和列表樣式圖像之間的空白

例如我有：JSFiddle

ul { 
 
    list-style-image: url('http://placehold.it/50x40'); 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ul>

我想我的li項目內的文本（如「咖啡」）觸摸圖片 - 有沒有差距列表項目圖像及其說明之間。

來源

2016-09-28 Helen3061371

你可以用每個<li>的內容，在相應跨越<span>然後位置：

<li><span>Coffee</span></li>

然後：

li span { 
    position: relative; 
    left: -7px; 
}

https://jsfiddle.net/ndpr9tnr/

來源

2016-09-28 13:10:25

在結束這個工作最好用我的照片。謝謝。 – Helen3061371

看來你不能直接控制list-style-image（或bullet）和li內容之間的空格。

爲了做到這一點，你可以使用圖片作爲背景

li { 
    list-style-type: none; 
    background-image: url('http://placehold.it/50x40'); 
    background-repeat: no-repeat; 
    background-size: 15px 15px; 
    padding-left: 15px; 
}

https://jsfiddle.net/gd2rtb70/

你也可以看看this answer here

來源

2016-09-28 12:48:08

我不認爲你可以做到這一點名單風格的圖像。您需要改爲創建一個僞造的列表樣式。事情是這樣的：

ul { 
    list-style:none; 
} 

li:before { 
    content:""; 
    background: url('http://placehold.it/50x40'); 
    width: 50px; 
    display: inline-block; 
    height: 40px; 
}

演示在這裏：

來源

2016-09-28 12:49:34

一種解決方案是通過僞類li元素之前刪除列表樣式並添加圖像:before

ul { 
 
    list-style: none; 
 
} 
 

 
ul li:before { 
 
    content: url(http://placehold.it/50x40); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tee</li> 
 
    <li>Cola</li> 
 
</ul>

來源

2016-09-28 12:51:39

你必須製作一個CSS技巧才能得到它。

使用

background: url();

，而不是

list-style-image

屬性用於此看到小提琴link

來源

2016-09-28 12:51:41

即使你已經接受一個答案，我覺得這是遠遠複雜得多，它需要的。

假設你不關心IE8或降低那麼我建議：

ul { 
 
    list-style-image: url('http://placehold.it/50x40'); 
 
} 
 
li { 
 
    text-indent: -7px; /* also works when solely applied to the <ul> */ 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ul>

來源

2016-09-28 14:26:34 MonkeyZeus

CSS刪除文本和列表樣式圖像之間的空白

回答

相關問題