css列表项无间距 |css特效时钟免费下载

/* 使用负 margin */
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0;
padding: 0;
}
/* 给 li 添加负 margin */
li {
margin-bottom: -10px;
}
/* 解除最后一个 li 的 margin */
li:last-child {
margin-bottom: 0;
}

以上代码利用负 margin 的方式，去掉了列表项之间的间距。大家首先将 ul 和 li 的 margin 和 padding 都设置成了 0，然后再给 li 添加负 margin。同时，大家使用了:last-child 伪类选择器，解除了最后一个列表项的 margin。这样就可以实现无间距的列表了。

/* 使用 line-height 和 font-size */
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0;
padding: 0;
line-height: 1;
font-size: 0.8em;
}
/* 给 li 添加 padding，增加空白 */
li:before {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-right: 10px;
vertical-align: middle;
}
/* 修改 li 的文本 color 属性 */
li span {
color: #333;
}

第二个方法是利用 line-height 和 font-size 去掉间隙，同时增加 padding，增加空白，使列表项看上去更美观。大家将 line-height 设置成 1，font-size 设置成较小的值，这样就可以去掉间隙。然后使用:before 伪类选择器，在 li 前面添加空白，同时 vertical-align 控制对齐方式。最后，大家使用 span 标签选择列表项的文本，修改其颜色属性。这样就可以实现无间距的列表了。