ul-li的分割线

1. 利用position和border

优点：
（1）比起直接为盒子设置 border，这种不用考虑 padding；
（2）手动控制高度更灵活，有时候可能会需要分割线高度 < 内容高度

点击查看代码 
ul li {
    position: relative;
    height: 50px;
}

ul li:not(:last-child)::after {
    position: absolute;
    right: 0;
    top: 10px;
    content: '';
    width: 0;
    /* 设置分割线高度，一般和被分割的内容等高 */
    height: 30px;
    border-right: 1px solid #ccc;
}

2. 利用position和background

优点：和 1-1 写法差不多，不过可以利用背景图设置更多变的样式
缺点：可能出现分割线粗细不均匀现象，原因不清楚，看到有人说分辨率问题

点击查看代码 
ul li {
    position: relative;
    height: 50px;
}

ul li:not(:last-child)::after {
    position: absolute;
    right: 0;
    top: 10px;
    content: '';
    width: 1px;
    height: 30px;
    background: #ccc;
}

3. 利用float和border （?）

优点：同 1，此外写起来更方便

点击查看代码 
ul li {
    height: 50px;
}

ul li:not(:last-child)::after {
    float: right;
    content: '';
    width: 0;
    height: 30px;
    /* 用margin来调整分割线位置 */
    margin: 10px 0;
    border-right: 1px solid #ccc;
}

4. 利用float和background

代码略

样式与效果-基础

相关

标签