html5 li标签设置列表图标_IT百科

li标签在html中大多作为导航或信息列表的结构。其实li配合list-style-type和list-style-position可以方便的设置小圆点或三角箭头。注意list-style-position: inside需要设置为inside设置在盒模型内才能生效。

除去list-style-type设置图标，可以用常规的relative配合absolute来设置箭头或者圆点等。

ul,li{

font-size:14px

color: #FF0000

list-style-image: url(rss_xml.gif)

list-style-type: none

}

</style>

-------------------

上面一样你用 UL 和 LI 的标签，，

list-style-image: url(rss_xml.gif) rss_xml.gif 是你想要的图片地址

--------------------

<body>之内

<div>

<ul>

</ul>

</div>

-------------

效果是

图片ok

=w=,三个方法……

一：把ul或li 中的行高删掉。

二：修改图片，把那红色的画下一点，可做成gif透明图（如原本图为：16*16，可画成：16*21，红色部分在最底部。）。

三：去掉list-style-image属性，改为在li 中用 background 属性

如：

ul{list-style:none}

li{padding-left:18pxbackground:url(pot.gif) no-repeat left 5px}

以上……

欢迎分享，转载请注明来源：内存溢出

html5 li标签设置列表图标