怎么用纯css实现列表项目前面的三角符号？

答案:4 悬赏:80 手机版

解决时间 2021-04-23 23:21

提问者网友：一抹荒凉废墟
2021-04-23 08:16

急啊。帮帮忙。

最佳答案

五星知识达人网友：行路难
2021-04-23 08:56

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="qq:751510550" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font:12px/20px Georgia, "Times New Roman", Times, serif; list-style:none; border:none;}
ul { width:240px; margin:20px auto; border:1px solid #ccc; height:77px; overflow:hidden; padding:0 10px;}
ul li { border-bottom:1px dashed #ddd; height:26px; line-height:26px; vertical-align:middle;}
li span{ border:5px solid #fff; border-left:5px solid #ccc; float:left; overflow:hidden; height:0; width:0; margin:8px 10px 0 5px;}
</style>
</head>

<body>
<ul>
<li><span></span>产品列表项目</li>
<li><span></span>产品列表项目</li>
<li><span></span>产品列表项目</li>
</ul>
</body>
</html>

代码如上所示，效果图：

全部回答

1楼网友：不甚了了
2021-04-23 10:38

纯css应该是不行了

因为项目符号样式 list-style-type 没有提供三角符号的取值

list-style-type 的取值如下：

disc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文字母 upper-alpha : CSS1 大写英文字母 none : CSS1 不使用项目符号 armenianl : CSS2 未支持。传统的亚美尼亚数字 cjk-ideographic : CSS2 未支持。浅白的表意数字 georgian : CSS2 未支持。传统的乔治数字 lower-greek : CSS2 未支持。基本的希腊小写字母 hebrew : CSS2 未支持。传统的希伯莱数字 hiragana : CSS2 未支持。日文平假名字符 hiragana-iroha : CSS2 未支持。日文平假名序号 katakana : CSS2 未支持。日文片假名字符 katakana-iroha : CSS2 未支持。日文片假名序号 lower-latin : CSS2 未支持。小写拉丁字母 upper-latin : CSS2 未支持。大写拉丁字母。

你可以用调用你的三家符号的图片作为项目符号呀

list-style-image : url ( url )

括号里填你的项目符号图片的地址也很方便的

2楼网友：等灯
2021-04-23 10:09

UL列表有提供几种风格符号，比如小圆点和方形，好像没有三角形哦。

UL { list-style-image:url(三角符号小图片); }

3楼网友：蕴藏春秋
2021-04-23 09:27

最简单的方法，连接一张三角符号的图片

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！