是否有可能在此图像中列出无序列表?是否有可能使用CSS这样的无序列表?
alt text http://i44.tinypic.com/fnqzbo.png
如果使用如箭头background
和padding-left
然后border-bottom
将受到图像以及我不能使用2个图像为单个<li>
标签
。
我不能使用margin-left
和background-position
我想?
任何想法?
感谢
是否有可能在此图像中列出无序列表?是否有可能使用CSS这样的无序列表?
alt text http://i44.tinypic.com/fnqzbo.png
如果使用如箭头background
和padding-left
然后border-bottom
将受到图像以及我不能使用2个图像为单个<li>
标签
。
我不能使用margin-left
和background-position
我想?
任何想法?
感谢
我上传了一个例子,你可以查看和下载在: 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>
这是使用图像作为要点的方式...
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>
用途:
list-style-image:url("/images/arrow.gif");
带边和边界的lis。