HTML CSS列表项目符号到图像不起作用

Question

我想将li项目符号更改为图像背景，但是它不起作用并且图像无法显示。 li背景的相同图像未显示。 根据W3Validator，我的HTML代码正确。 那我的HTML li为什么不起作用？

如何使我的li出现在图像中？

我用了这段代码。

  .heading{ font: bold 11px verdana; color:#525252; } .altheading{ font: bold 14px verdana; color:#C70C1F; } .bodies{ font: 10px verdana; color:#303030; } .gheading{ font: 12px MS Reference Sans Serif, Tahoma; color:#335784; } .gbodiesR{ font: 12px MS Reference Sans Serif, Tahoma; color:#C70C1F;font-weight: 450; } .gbodiesG{ font: 12px MS Reference Sans Serif, Tahoma; color:#006600; font-weight: 450; } li.cross{ list-style-image: url('https://shivkumar.in.net/Cross.jpg'); padding: 0 0 0 10px; } li.tick{ list-style-image: url('https://shivkumar.in.net/tick.gif'); padding: 0 0 0 10px; } .phis_ico{ background-image:url("https://shivkumar.in.net/phish914.jpg"); background-repeat:no-repeat; background-position:right; opacity: 1; filter: alpha(opacity=80); } 

 <table bgcolor="#D4281E" align="center" width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td> <table bgcolor="#FFF" width="100%" border="02" cellpadding="0" cellspacing="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="phis_ico"> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td colspan="2" class="altheading" valign= "center" align="center"> <u>Top Title</u> </td> </tr> <tr> <td height="10" colspan="2"></td> </tr> <tr> <td colspan="2" class="gheading" valign= "center" align="center"> <p align="justify" style="padding: 0 10px 0 10px;"> please help bepowbis my code </p> </td> </tr> <tr> <td height="10" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph. </td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="tick"> </td> <td align="left" class="gbodiesG"> I am green paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="tick"> </td> <td align="left" class="gbodiesG"> I am green paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="tick"> </td> <td align="left" class="gbodiesG"> I am green paragraph </td> </tr> <tr> <td height="38" colspan="2"></td> </tr> <tr> <td colspan="2" align="center"> <a href="#"><img src= "https://unionbankonline.co.in/pics/Conti3.jpg" border="0" id="continue" /></a> </td> </tr> <tr> <td height="28" colspan="2"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> 

Answer 1

首先，我在您的HTML代码中看不到无序列表。 如果没有列表，则没有<li>元素来渲染图像。

如果您的目标是拥有两个列表（一个包含Cross.jpg，一个包含tick.gif），则应该将list-style-image附加到您的<ul>标签而不是您的<li>标签。 因此，您的CSS如下所示：

ul.cross {
  list-style-image: url('https://shivkumar.in.net/Cross.jpg'); 
  padding: 0 0 0 10px;
  }

ul.tick {
  list-style-image: url('https://shivkumar.in.net/tick.gif'); 
  padding: 0 0 0 10px; 
  }

您的HTML如下所示：

<ul class="cross">
  <li>List Item Here</li>
  <li>List Item Here</li>
  <li>List Item Here</li>
</ul>

<ul class="tick">
  <li>List Item Here</li>
  <li>List Item Here</li>
  <li>List Item Here</li>
</ul>

如果您尝试在不同的列表项上允许使用不同的图像，则需要为每个列表创建背景图像：在这种情况下，您的CSS将如下所示：

ul {
  list-style: none;
  }

li.cross {
  background: url('https://shivkumar.in.net/Cross.jpg')no-repeat;
  }

li.tick {
  background: url('https://shivkumar.in.net/tick.gif')no-repeat;
  }

您的HTML将如下所示：

<ul>
  <li class="cross"></li>
  <li class="tick"></li>
</ul>

编辑：只是扩展您的代码段，并看到嵌套在您<table>的<li>标记。 这是无效的HTML 。 <li>元素应该是<ul>或<ol>元素的子元素。

Answer 2

为了确保您不会在另一个样式表中覆盖li样式，请将以下内容添加到li.cross和li.tick类中

display: list-item;

看到：

li.cross{
    list-style-image: url('https://shivkumar.in.net/Cross.jpg'); 
    padding: 0 0 0 10px;
    display: list-item;
}

li.tick{
    list-style-image: url('https://shivkumar.in.net/tick.gif'); 
    padding: 0 0 0 10px;
    display: list-item;
}

编辑：

查看您的站点，您确实有一个冲突的样式规则，该规则隐藏了子弹：

如果您不想移动第二个CSS文件，请使用此答案中的修复程序在CSS类中覆盖该值。

请查看此gif：

Answer 3

请从您的答案中删除我的网站网址，我投了赞成票，但出于优先考虑或出于隐私考虑，我不想与任何人共享我的网站。 请从您的答案中删除所有网址。