如何删除列表最后一行的虚线
实现方法是4种
第一个种方法:
给ul定义一个高度,用overflow:hidden隐藏起来,而li{border-bottom:1px dotted #ccc;},如果条数不固定的话就是没有办法实现,一般适合固定高度用,只能解决一部分。
代码如下:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >去掉底部虚线</ title > < style > *{ margin:0; padding:0;} .box{ width:500px; height:300px; border:1px solid #ccc; padding:10px; margin:100px auto;} .box_con ul{ overflow:hidden; height:100px;} .box_con li{ height:26px; line-height:26px; border-bottom:1px dotted #ccc; margin-top:-1px; } </ style > </ head > < body > < div class="box"> < div class="box_con"> < ul > < li >111111111111111111</ li > < li >2222222222222222222</ li > < li >111111111111111111</ li > < li >2222222222222222222</ li > < li >111111111111111111</ li > < li >2222222222222222222</ li > </ ul > </ div > </ div > </ body > </ html > |
第二个种方法:
用js来实现,就是给li最后一行$(li:last-child)去掉虚线
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >去掉底部虚线</ title > < style > *{ margin:0; padding:0;} .box{ width:500px; height:300px; border:1px solid #ccc; padding:10px; margin:100px auto;} .box_con ul{ overflow:hidden; height:100px;} .box_con li{ height:26px; line-height:26px; border-bottom:1px dotted #ccc; } .box_con .noline{ border:0;} </ style > </ head > < body > < script src="jquery.js"></ script > < script > $(function(){ $(".box_con").find("ul").find("li:last-child").addClass("noline"); }) </ script > < div class="box"> < div class="box_con"> < ul > < li >111111111111111111</ li > < li >2222222222222222222</ li > < li >111111111111111111</ li > < li >2222222222222222222</ li > < li >111111111111111111</ li > < li class="noline">2222222222222222222</ li > </ ul > </ div > </ div > </ body > </ html > |
第三种方法:
用css3选择器给li:last-child{border:0}就行了
第四种方法
就是给父级添加overflow:hidden;zoom:1而zoom:1是针对ie6的不兼容 ,li只要加border-top:1px dotted #ccc; margin-top:-1px;就行了,主要用到是margin-top来实现的同时解决不固定的条数和分页里面列表显示.
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >去掉底部虚线</ title > < style > *{ margin:0; padding:0;} .box{ width:500px; height:300px; border:1px solid #ccc; padding:10px; margin:100px auto;} .box_con ul{ overflow:hidden;zoom:1;} .box_con li{ height:26px; line-height:26px; border-top:1px dotted #ccc; margin-top:-1px; } </ style > </ head > < body > < div class="box"> < div class="box_con"> < ul > < li >111111111111111111</ li > < li >2222222222222222222</ li > < li >111111111111111111</ li > < li >2222222222222222222</ li > < li >111111111111111111</ li > < li >2222222222222222222</ li > </ ul > </ div > </ div > </ body > </ html > |
关注web前端
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步