技术经验解读：代码：PC链接列表面板border的一种做法（每行之间有分割线）

"

PC 链接列表面板，border的一种做法

做页面经常遇到一种问题，上面是标题，下面是单行链接列表。为了保证后台套页面方便，所有列表项必须完全一样。但我们无法解决第一行或最后一行多出来的分割线。

使用 .main-list .fenleilist > a:first-child 这样的选择器，又有兼容性之类问题。

下述方法很好的解决了这个问题：（将链接列表面板，向上提升1px，藏在标题的后面）

解决思路是： 　　2016-3-23

/1、里面列表是上边框有分隔线，则外面容器向上 -1px/

.box1{overflow:hidden;}

.box1 .item{Width＜/span>:100%;border-top:1px solid #f00;margin-top:-1px;}

/2、里面列表是下边框有分隔线，则外面容器向下 -1px/

.box2{overflow:hidden;}

.box2 .item{Width＜/span>:100%;border-bottom:1px solid #f00;margin-bottom:-1px;}

这是一行中有多个链接的例子：

[/span>style type=""text/css""

h1,h2,h3,h4,h5,h6,p{padding:0;margin:0;}

.main-list{position:relative;Width＜/span>:300px;}

.main-list h2{position:relative;Height＜/span>:40px;line-Height＜/span>:40px;font-size:14px;text-align:center;background:#252629;color:#f90;z-index:1;}

.main-list .fenleilist{position:relative;margin-top:-1px;z-index:0;}

.main-list .fenleilist > a{display:block;Width＜/span>:100%;color:#fff;font-size:12px;Height＜/span>:28px;line-Height＜/span>:28px;border-top:1px dashed #000;box-sizing:content-box;}

[/span>div class=""main-list""

[/span>h2

[/span>div class=""fenleilist clearfix""

[/span>a href=""##""

[/span>a href=""##""

[/span>h2

[/span>div class=""fenleilist""

[/span>a href=""##""

[/span>a href=""##""

PC 链接列表面板，border的一种做法，这是一行中有多个链接的例子：

[/span>style //代码效果参考：http://www.lyjsj.net.cn/wx/art_22784.html

.main-list h2{position:relative;padding-left:30px;Height＜/span>:40px;line-Height＜/span>:40px;font-size:14px;font-weight: normal;background:#252629;z-index:1;}

.main-list .fenleilist{position:relative;margin-left:10px;margin-top:-1px;background:url(../images/bg_fenlei.png);z-index:0;}

.main-list .fenleilist > a{float:left;color:#fff;font-size:12px;Height＜/span>:28px;line-Height＜/span>:28px;padding-right:20px;box-sizing:content-box;

padding-top:1px;/这个占的高度是border占的高度/

}

[/span>div class=""main-list""

[/span>h2

[/span>div class=""fenleilist clearfix""

[/span>a href"