如何删除列表最后一行的虚线

实现方法是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来实现的同时解决不固定的条数和分页里面列表显示.

代码如下：

<!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>

posted on 2013-07-26 22:45 仙梦之飘阅读(509) 评论(0) 编辑收藏举报