设置li标签的list-style属性为none
如下例子
li标签在没有设置li{list-style:none}的时候,前面是有圆点的,设置之后,圆点消失
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{list-style: none}/*这里设置*/
</style>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>
一般的小圆点是因为图片处于列表标签里,比如:
<ul>
<li><img src="http://img.baidu.com/img/logo-zhidao.gif" /></li>
<li><img src="http://img.baidu.com/img/logo-zhidao.gif" /></li>
<li><img src="http://img.baidu.com/img/logo-zhidao.gif" /></li>
</ul>
不过这种默认的显示方式各浏览器显示有些偏差,
一般都用css重定义
ul,li,dl,dd,dt{margin:0padding:0list-style:none}
...
其实我就想实现未点击按钮时,文字右上方有小圆点,点击后消失的效果
但是不想用浮动、定位,结果百度搜了一圈,大家都是用浮动、定位解决,
记录两种更好的解决方案:
1.使用sup标签
2.使用css属性vertical-align