Question

HTML列表边框重叠问题

我现在在做一个ul列表，然后给每个li加上边框，但是加完了之后，相邻列表的边框就会变成2px，比如第一个li的下边框和第二个li的上边框就会重叠在一起，请问这有什么办法解决一下么？

Answer 1

试试给li在样式中指定margin-top:-1px; 这样两个边框就可以重叠在一起了.

追问

我之前试过这样，的确能出来这个效果~~ 不过我现在这个li是加了hover的，就是鼠标悬停就会边框变色，这样一来，每个变色的只会是上左右三条框，下边框被盖住，看不出效果了~~~~ 楼下几位回答的也都是满足不了这个需求~~

追答

你这个要求还真是麻烦,不过也有办法
li {
border:1px solid #FF0000;
margin-top:-1px;
}
li:hover {
border:1px solid #0000FF;
position:relative;
z-index:2;
}

Answer 2

只设置li的上边框border-top:1px solid #ccc;
最下面的那个如果也要边框的话就把ul设置下边框，border-bottom:1px solid #ccc;
具体的margin，padding，清零或者按你的要求来

Answer 3

可以给LI设border-bottom: none; 然后ul border-bottom: 1px solid #ccc