javascript - 在 list-style-type 而不是 list-style-image 中添加图像

标签 javascript css listview

请有人指导我如何在以下代码中以 ul li 显示列表样式图像:

我需要在 list-style-type 中显示图像,因为在我的页面中 list-style-image 不起作用。

这是我基于 list-style-image 的 CSS

ul.footerlist {padding-left:20px; list-style-image:url('../../images/li.png');}
ul.footerlist li{line-height:24px; }
ul.footerlist li a{color:#303030; }
ul.footerlist li a:hover{color:#0099cc; text-decoration:none;}

ul.footerlist {padding-left:20px; list-style-type:url('https://mdn.mozillademos.org/files/11981/starsolid.gif');}
ul.footerlist li{line-height:24px; }
ul.footerlist li a{color:#303030; }
ul.footerlist li a:hover{color:#0099cc; text-decoration:none;}
<ul class="footerlist go-right go-text-right">
                                  <li>1</li>
                                  <li>2</li>
                                  <li>3</li>
                                  <li>4</li>
                                  <li>5</li>

                              </ul>

最佳答案

列表样式类型不会显示自定义图像。文档看起来只显示常见的形状/字母等 ( http://www.w3schools.com/cssref/pr_list-style-type.asp )

我认为您应该尝试让 List 样式的图像再次工作。

您确定您的图片已上传到 ../../images/li.png 并且可以查看吗?是否存在相对路径问题或权限问题?


回复二:

这段代码似乎可以正常工作。你同意吗?

ul.footerlist {padding-left:20px; list-style-image:url('https://mdn.mozillademos.org/files/11981/starsolid.gif');}
ul.footerlist li{line-height:24px; }
ul.footerlist li a{color:#303030; }
ul.footerlist li a:hover{color:#0099cc; text-decoration:none;}
<ul class="footerlist go-right go-text-right">
                                  <li>1</li>
                                  <li>2</li>
                                  <li>3</li>
                                  <li>4</li>
                                  <li>5</li>

                              </ul>

关于javascript - 在 list-style-type 而不是 list-style-image 中添加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38317147/

相关文章:

javascript - 为对象中的每个元素渲染到 DOM 中

javascript - 为什么无法获取参数?

css - 嵌套子菜单重叠我该如何解决?

java - 如何在JavaFX中将listview项目传输到java数据库?

android - ListView 中的 onListItemClick 不起作用

android - 选择器的 ListView 项目 LongClick 状态

Javascript:我需要一个好的数据结构来保持排序列表

javascript - 如何逐行打印 Vue 对象

css - 将鼠标悬停在向右推送内容的菜单上

javascript - 单击时切换 html 的样式表切换器按钮(jQuery)?