css怎么去掉li的点

1. 去掉li的点的方法

现在有这样一个需求:列表显示的时候不想让每个li前面带有点(?),那怎么实现呢?下面我们来一步步解析。

1.1 使用list-style-type:none;

可以使用CSS的list-style-type属性来实现,将其设置为none,即可将其前面的点去掉。

li {

list-style-type: none;

}

1.2 使用list-style:none;

除了使用list-style-type属性去掉点之外,还可以使用list-style属性,将其设置为none,同样也可以将点去除。

li {

list-style: none;

}

1.3 使用list-style-image:url(none);

还有一种可以将其去掉的方法,那就是使用list-style-image属性,将其设置为none即可。但是不建议使用该方法,因为这样会强制浏览器去请求图片,浪费带宽资源。

li {

list-style-image: url(none);

}

2. 建议使用list-style-type:none;

总的来说,建议使用list-style-type:none;这种方法,因为它更加简单易懂,不需要浏览器去请求图片,而且更加方便维护。

例子

代码如下:

ul {

list-style-type: none;

}

li {

font-size: 18px;

font-weight: bold;

margin-bottom: 10px;

}

效果如下:

苍天啊!这一天到底要过多少次才是真的呢?

就算再吃一百个光球也不会感觉到饱啊

小宝贝你想喝水吗?

生命诞生的瞬间就证明了生命的可贵

其中,list-style-type:none;去掉了每个li前面的点,而li样式的设置使得每个li具有了统一的样式,并且每个li之间有了一定的间距。

注:此文仅供参考,具体情况具体分析,实际开发中还需要根据需求具体设置样式。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。