看着简单其实不然的css布局问题，请教大家？

问题描述

问 题

要做一个列表页，用ul>li写的，要确保每行字下面都有一个底部的线，问题在于每一个li里面可能有好几行字，如果给li加border-bottom的话只有最后每个li的最后一行才会有边框。。怎么实现效果呢！？

解决方案

ul {
    list-style:none;
    border: 1px solid #EEEEEE;
    box-shadow: 1px 1px 0 #DDDDDD;
    font-size: 22px;
    line-height: 50px;
    margin: 2% auto;
    padding: 10px 20px;
    width: 500px;
    background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0); 
    background-size: 100% 50px;
}

原理：固定行高（50px)，以每行为单位做背景，然后平铺背景：Live Demo
linear-gradient浏览器支持有限，比较旧的浏览器可以选择用图片。。。

这篇关于看着简单其实不然的css布局问题，请教大家？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！