图片链接
[英]link with image
问题描述
i have list of links 
我有链接列表
- link1 链接1
- link2 LINK2
- link3 LINK3
how can i add an image left on each link with css style not html tags? 如何添加留有CSS样式而不是html标签的每个链接上的图像？
3 个解决方案
解决方案1
1 已采纳 2010-06-09 21:24:13
Use CSS to suppress the existing list bullets ( list-style:none ) then specify your own image using background , as in this snippet: 使用CSS抑制现有列表项目符号（ list-style:none ），然后使用background指定您自己的图像，如以下代码段所示：
li {
list-style: none;
background: url(16-heart-red-xxs.png) no-repeat left center;
...
For more information, see: http://webdesign.about.com/od/css/a/aa012907.htm 有关更多信息，请参见： http : //webdesign.about.com/od/css/a/aa012907.htm
EDIT: 编辑：
See below for new source code: 参见下面的新源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
li
{
list-style: none;
background: url(/images/servers.png);
background-repeat: no-repeat;
background-position: left;
}
</style>
</head>
<body>
<ul>
<li><a href="http://trading-it.ru/Category/1--.aspx">??????? ? ????????? ????????????</a></li>
<li><a href="http://trading-it.ru/Category/2--.aspx">????? ??? ????????</a></li>
<li><a href="http://trading-it.ru/Category/3--.aspx">??????????, ????????</a></li>
<li><a href="http://trading-it.ru/Category/4--apple.aspx">????????? Apple</a></li>
<li><a href="http://trading-it.ru/Category/10--.aspx">??????????? ???????????</a></li>
<li><a href="http://trading-it.ru/Category/11--.aspx">???????????? ?????????????</a></li>
<li><a href="http://trading-it.ru/Category/12--.aspx">????????? ? ??????? ???????</a></li>
<li><a href="http://trading-it.ru/Category/13--.aspx">????????? ?????????</a></li>
<li><a href="http://trading-it.ru/Category/14-.aspx">?????????</a></li>
<li><a href="http://trading-it.ru/Category/15--.aspx">?????????? ? ??????</a></li>
<li><a href="http://trading-it.ru/Category/16--.aspx">??????????????? ????????????</a></li>
<li><a href="http://trading-it.ru/Category/17--.aspx">??????? ????????????</a></li>
<li><a href="http://trading-it.ru/Category/21-111.aspx">111</a></li>
</ul>
</body>
</html>
解决方案2
1 2010-06-09 21:24:29
It sounds like what you are really wanting to do is to change the • circular bullet point to an image that you have specified. 听起来，您真正想要做的是将•圆形项目符号点更改为指定的图像。 Like so: 像这样：
<UL id="navlist">
#navlist
{
list-style: none;
}
#navlist li
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
}
解决方案3
1 2010-06-09 21:56:28
You can also use the list-style-image property for that: 您还可以为此使用list-style-image属性：
li {
list-style-image: url("/images/servers.png");
}
This will add the image and not a circle, square etc. to each element of the list. 这会将图像而不是圆形，正方形等添加到列表的每个元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.