DIV+CSS中这样去掉最后一个li的下边框 不能给 li 样式(<li slass="">或<li style="border:none>)

如题所述

方法一:用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我
温馨提示:内容为网友见解,仅供参考
第1个回答  2012-02-27
别人说过的我就不说了
结构
<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的缺点 一些超出边界的元素可能被隐藏
第2个回答  2011-07-20
要看你是些在li标签里面还是些在li 的a标签里面如果是a这样就不行 是li 的话可以 不过最好不要这样。你写个额外的class好了这样方便调用要是在碰到就用这个就行
第3个回答  2011-07-20
<li style="border-bottom:none>
相似回答