与图片链接答案

【问题标题】：link with image与图片链接
【发布时间】：2011-03-01 21:37:34
【问题描述】：

我有链接列表

链接1
链接2
链接3

如何在每个链接上添加一个带有 css 样式而不是 html 标签的图像？

【问题讨论】：

你能看到页面trading-it.ru/1.htm并说出错误在哪里吗？
将style 属性放在ul 中的最后一个li 上

标签： html css image hyperlink

【解决方案1】：

使用 CSS 隐藏现有的列表项目符号 (list-style:none)，然后使用 background 指定您自己的图像，如在此 sn-p 中：

li {
 list-style: none;
 background: url(16-heart-red-xxs.png) no-repeat left center;
 ...

欲了解更多信息，请参阅：http://webdesign.about.com/od/css/a/aa012907.htm

编辑：

新的源代码见下文：

<!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>

【讨论】：

样式只应用于最后一个li 元素，它需要应用于所有你想要有图像的地方。我建议在您的文档中添加一个<style>...</style> 部分以简化和集中。
是的，但我这样做是为了小测试。在任何情况下您的样品都不起作用，请参阅页面trading-it.ru/1.htm

【解决方案2】：

听起来您真正想做的是将 • 圆形项目符号点更改为您指定的图像。像这样：

<UL id="navlist">

#navlist
{
list-style: none;
}

#navlist li 
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
}

【讨论】：

不，我只是想在每个链接的左侧添加一个图像，无论是否是项目符号。图片可以不同

【解决方案3】：

您也可以为此使用list-style-image 属性：

li {
    list-style-image: url("/images/servers.png");
}

这会将图像而不是圆形、正方形等添加到列表的每个元素中。

【讨论】：