列表樣式圖像不起作用

我想創建自定義項目符號點，它不工作。列表樣式圖像不起作用

這是我的HTML。

<div id="services"> 
    <ul id="serviceText"> 
     <h2 id="serviceHeader"><strong>Services I Offer:</strong></h2> 
     <li>Intros</li> 
     <li>Transitions</li> 
     <li>Lower Third Titles</li> 
     <li>Web Page Design</li> 
     <li>and more...</li>       
    </ul> 
</div>

這是我的CSS

ul#serviceText { 
    list-style-image: url(images/checkmark.gif); 
    font-size: 14px; 
    float: right; 
    padding-top: 5px; 
    color: white; 
}

My site is located here xdtrammell.com/lol if it helps you to see all my code.

來源

2012-01-31 Trammell

改變你的選擇，以ul#serviceText li。另外請記住，您不能在ul中包含h2元素。是無效的HTML。

來源

2012-01-31 20:59:27 Sotiris

謝謝你那是錯的。我知道這很簡單。 – Trammell 2012-01-31 21:00:56

與使用list-style-image相比，您可以更好地爲列表項目使用CCS背景。您可以更好地控制圖形的位置和文本的間距。

請參見：http://preview.moveable.com/JM/ilovelists/

來源

2012-01-31 21:01:11

謝謝我將考慮未來，現在我只需要在那裏爲我的學校項目。 – Trammell 2012-01-31 21:06:57

具體來說，我認爲你想創建的圖片大小定製子彈，這裏是我會怎麼做。

的CSS

.list { 
    margin: 0; 
    padding: 0; 
} 

.list-li { 
    background: url('../directory/your image here.jpg') no-repeat top left; 
    margin: 0; 
    padding: 4px 0 4px 20px; 
    list-style: none; 
}

關鍵的一點要注意的是背景圖像是在左上角，所以考慮到這一點，當你調整你的填充。填充是：頂部，右側，左側，底部。

的HTML

<ul class="list"> 
    <li class="list-item">lorem ipsum</li> 
    <li class="list-item">lorem ipsum</li> 
</ul>

我希望這有助於！

來源

2012-01-31 21:10:53 Jim

謝謝你我會開始這樣做，但正如我現在對Diodeus說的，我只是需要他們登上我的項目頁面。另外你設置它的方式不會使用#list，因爲你讓它們成爲類而不是ID。 – Trammell 2012-01-31 21:15:17

謝謝，我修改了我的答案:-)（它已經有一段時間了） – Jim 2016-09-22 02:07:37

它是否需要圖像網址前的../以便它知道要上一個目錄？換句話說，您的圖片是否存在於頂層目錄或下一層目錄中？如果沒有在頂級存在，那麼它需要「../」

來源

2014-02-14 15:33:45 user3310835

只要改變路徑，圖像文件夾在這樣的URL（../images/checkmark.gif）和‘禮’標籤元素足夠作爲選擇器。

li {list-style-image: url(../images/checkmark.gif);}

來源

2017-08-13 21:11:16

列表樣式圖像不起作用

回答

相關問題