用css如何去掉li前面的点

html-css010

用css如何去掉li前面的点,第1张

设置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