是否有可能使用CSS這樣的無序列表？

Question

是否有可能在此圖像中列出無序列表？

alt text http://i44.tinypic.com/fnqzbo.png

如果使用如箭頭background和padding-left然後border-bottom將受到圖像以及我不能使用2個圖像爲單個<li>標籤

。

我不能使用margin-left和background-position我想？

任何想法？

感謝

Answer 1

我上傳了一個例子，你可以查看和下載在： http://joegreen.co.uk/stackoverflow/img-list/img-list.html

這裏的CSS和標記以供參考。它已經過Firefox 3.6，Safari 4，Chrome，IE7和IE8的測試。

CSS：

#list-container { 
    width: 460px; 
    padding: 15px 15px 15px 30px; 
    background-color: #f6f4ea; 
    border: 1px solid #e3e1d5; 
    font: 12px Verdana, Geneva, sans-serif; 
} 

#list-container ul { 
    list-style: disc outside url('./bullet.gif'); 
    margin: 0; 
    padding: 0; 
} 

#list-container ul li { 
    margin: 7px 0 0 0; 
    padding: 0 0 7px 0; 
    border-bottom: 1px dotted #7a7974; 
} 

HTML：

<div id="list-container"> 
    <ul> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> 
     <li>Donec tellus felis, euismod non egestas sed, suscipit a leo. Ut quis augue vel mauris mollis volutpat.</li> 
     <li>Morbi varius porttitor massa, sed lobortis magna ornare et.</li> 
     <li>Fusce blandit risus varius felis posuere vehicula iaculis turpis bibendum. Integer a molestie nunc.</li> 
     <li>In blandit neque ac dui laoreet tincidunt dapibus leo pulvinar. Sed nec ligula non orci vulputate vulputate.</li> 
    </ul> 
</div> 

Answer 2

這是使用圖像作爲要點的方式...

http://css.maxdesign.com.au/listutorial/11.htm（見下面的代碼粘貼）。

的唯一的事情你需要是後添加底部邊框點綴每個列表項（應該是很容易的。）

.iconlist 
{ 
list-style: none; 
margin: 0; 
padding: 0; 
} 

li.pdf 
{ 
background-image: url(bullet_pdf.gif); 
background-repeat: no-repeat; 
background-position: 0 50%; 
padding: 3px 0 3px 20px; 
margin: .4em 0; 
} 

li.doc 
{ 
background-image: url(bullet_doc.gif); 
background-repeat: no-repeat; 
background-position: 0 50%; 
padding: 3px 0 3px 20px; 
margin: .4em 0; 
} 

li.text 
{ 
background-image: url(bullet_text.gif); 
background-repeat: no-repeat; 
background-position: 0 50%; 
padding: 3px 0 3px 20px; 
margin: .4em 0; 
} 

li.htm 
{ 
background-image: url(bullet_htm.gif); 
background-repeat: no-repeat; 
background-position: 0 50%; 
padding: 3px 0 3px 20px; 
margin: .4em 0; 
} 

HTML CODE 
<ul class="iconlist"> 
<li class="pdf"><a href="#">Milk</a></li> 
<li class="text"><a href="#">Eggs</a></li> 
<li class="htm"><a href="#">Cheese</a></li> 
<li class="doc"><a href="#">Vegetables</a></li> 
<li class="text"><a href="#">Fruit</a></li> 
</ul> 

Answer 3

用途：

list-style-image:url("/images/arrow.gif"); 

帶邊和邊界的lis。