DIV+CSS中这样去掉最后一个li的下边框 不能给 li 样式（<li slass="">或<li style="border:none>）
4个回答
展开全部
方法一：用Jquery（需要先下载jquery-1.3.2.min.js,其它版本也可以哦）
用Jquery简单一些(一句话就OK，千万记住要引用Jquery哦,如果没有，去网上下一个，很方便的)
<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#ul1 li:last").css("border","none");
})
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#ul1{ width:200px;}
#ul1 li{ width:100%; height:24px; border-bottom:1px solid red;}
</style>
</head>
<body>
<ul id="ul1">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>
方法二：直接写JS脚本，代码稍微多一点点
<html>
<title></title>
<head>
<script type="text/javascript">
window.onload = function urlborder() {
var listr = document.getElementById("ul1").getElementsByTagName('li');
for (var i = 0; i < listr.length; i++) {
if (i == listr.length - 1) {
listr[i].style.borderWidth = "0";
}
}
}
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#ul1{ width:200px;}
#ul1 li{ width:100%; height:24px; border-bottom:1px solid red;}
</style>
</head>
<body>
<ul id="ul1">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>
不知道能否满足要求，还不行的话可以Hi我
用Jquery简单一些(一句话就OK，千万记住要引用Jquery哦,如果没有，去网上下一个，很方便的)
<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#ul1 li:last").css("border","none");
})
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#ul1{ width:200px;}
#ul1 li{ width:100%; height:24px; border-bottom:1px solid red;}
</style>
</head>
<body>
<ul id="ul1">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>
方法二：直接写JS脚本，代码稍微多一点点
<html>
<title></title>
<head>
<script type="text/javascript">
window.onload = function urlborder() {
var listr = document.getElementById("ul1").getElementsByTagName('li');
for (var i = 0; i < listr.length; i++) {
if (i == listr.length - 1) {
listr[i].style.borderWidth = "0";
}
}
}
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#ul1{ width:200px;}
#ul1 li{ width:100%; height:24px; border-bottom:1px solid red;}
</style>
</head>
<body>
<ul id="ul1">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>
不知道能否满足要求，还不行的话可以Hi我
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
别人说过的我就不说了
结构
<div class="list">
<ul>
<li>1</li>
<li>3</li>
<li>3</li>
</ul>
</div>
如果ul后面还有其他元素
.list { overflow:hidden; }
.list ul { margin-bottom:-1px; }
.list li { border-bottom:1px solid #000; }
如果没有
.list { overflow:hidden; }
.list ul { margin-top:-1px; }
.list li { border-top:1px solid #000; }
这个算是纯css解决方案 不增加标签 不用js 缺点就是overflow的缺点 一些超出边界的元素可能被隐藏
结构
<div class="list">
<ul>
<li>1</li>
<li>3</li>
<li>3</li>
</ul>
</div>
如果ul后面还有其他元素
.list { overflow:hidden; }
.list ul { margin-bottom:-1px; }
.list li { border-bottom:1px solid #000; }
如果没有
.list { overflow:hidden; }
.list ul { margin-top:-1px; }
.list li { border-top:1px solid #000; }
这个算是纯css解决方案 不增加标签 不用js 缺点就是overflow的缺点 一些超出边界的元素可能被隐藏
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要看你是些在li标签里面还是些在li 的a标签里面如果是a这样就不行 是li 的话可以 不过最好不要这样。你写个额外的class好了这样方便调用要是在碰到就用这个就行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<li style="border-bottom:none>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
