去掉ul li 前面的点与空白(div+css)
如果直接在网页用 ul li 标签,默认情况下有一个小黑点,并且每个li前面还有一段空白,尤其是li中包括图片的情况。为什么会出现这种情况?ul li 是 html 中的列表标签,所以默认每个li前面都有一个小黑点。而每个li前面空白与 padding 和 margin 有关,padding 是内间距,margin 外边距。
仅用文字说明不太形象,下面将分别举例说明去掉 ul li前面的点的方法和列举li前面空白的示例以及去掉空白的方法。
一、去掉ul li 前面的点
只需在 css 文件或 html 的 style 标签中添加去掉ul li 前面的点 css 属性即可,具体如下:
去掉 li 前面的点 css样式:
ul,li{list-style:none;}
如果直接写在网页文件中,需要放在 style 标签中,具体样式如下:
<style type="text/css">
ul,li{list-style:none;}
</style>
一般来说,很多 html 标签都需要去掉小黑点,所以把 list-style:none 写到一个公共 css 文件,所有网页引用这个文件,就不用每个网页都写了。
二、去掉li前面空白
1、li前面有空白的示例
如果直接在网页中用 ul li,每个 li 前面都有空白,如图1所示:
图1
图1代码:
<style type="text/css">
.test{list-style:none;overflow:hidden; width:410px; height:200px;border:#c9d9e3 1px solid;}
</style>
<ul class="test"><li><img src="images/ads1.jpg" alt="去掉li前面空白" /></li></ul>
2、去掉li前面空白
只需在 css 中加 ul,li{padding:0; margin:0;},li前面的空白就会去掉,即:
<style type="text/css">
ul,li{list-style:none;padding:0; margin:0;}
.test{overflow:hidden; width:410px; height:200px;border:#c9d9e3 1px solid;}
</style>
去掉li前面的空白后的效果如图2所示:
图2
-
相关阅读
- CSS3 大小缩放scale()scalex()scaley(
- C# listview选择行(多行)
- 固定元素(div、ul li)显示在屏幕左上角、右下角、
- CSS3 Filter 滤镜透明效果应用实例
- CSS3 text-shadow语法规则及上下左右文字阴
- C# Split用法及实例
- CSS3 鼠标经过背景高亮/反亮显示(transition语法
- CSS3 旋转 rotate3d()rotatez(
- 网站程序代码错误引发的iis溢出Application P
- 定义 input 类所有元素的CSS样式
- C#写文本文件,如何换行(添加换行符)Environment.N
- CSS3 animation-duration属性及文字闪