删除列表最后一个“li”的某些样式

折腾过代码的朋友应该看了标题就明白倡萌想要表达的意思,没折腾过的朋友就接着看吧。倡萌最近为新主题Hocean主题添加带缩略图的相关文章功能,在样式排列上使用了列表,同时为"li"添加了一个一像素的右边框,然而最后一个 li 仍旧显示右边框(如文中图片所示),对于追求完美的倡萌来说,这是不允许的。

这个小问题对于码农来说,应该是小菜一碟,但是倡萌还真没折腾过,所以google一下,找到方法,做一个记录。

解决方法有两种

方法一:已经引入了jQuery库,再加一句简单的js代码即可,样例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>//引入jQuery库
<script type="text/javascript">
$(function(){
$("#test li:last").css("border","none");//关键函数,注意容器id“#test”要和html代码中一样
})
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#test{ width:200px;}
#test li{ width:100%; height:24px; border-right:1px solid red;}
</style>
</head>
<body>
<ul id="test">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>

方法二:没有引入jQuery库,使用原生js代码实现,样例如下:

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
<html>
<title></title>
<head>
<script type="text/javascript">
window.onload = function urlborder() {
        var listr = document.getElementById("test").getElementsByTagName('li');
      //注意容器id“test”要和html代码中一样
        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; }
#test{ width:200px;}
#test li{ width:100%; height:24px; border-right:1px solid red;}
</style>
</head>
<body>
<ul id="test">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>

这只是一个范例,你可以自己拓展!

记录完,收工!

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2012/9/8作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

16 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 自然志说道:
    5#

    可以使用 css 的“相邻兄弟选择器”:

    ul li + li {border-left:1px solid #ccc}

    完事,就这么简单。

  2. kk2kk说道:
    4#

    其实可以用css的overflow:hidden配合1px的溢出来实现这个功能,,,,

    • cloudyan说道:

      这个方法解决最好,能不用js又不导致结构复杂的解决方法最好了

  3. Tokin说道:
    3#

    看来我也要百度一下带图片的相关文章怎么实现的,这个很有爱的说

    • 小雨说道:

      无觅,最直接了~

      • Tokin说道:

        主要是我步子那个用插件 :twisted:

      • Tokin说道:

        对了,带头像的最近评论怎么实现的呢?我百度到了一个,结果我管理员回复后,全都从边栏消失了,可能代码问题,我不会php :???:

        • 小雨说道:

          怎么不用插件,百度一下也很多的。。。

          • Tokin说道:

            恩,现在上课去,有空再折腾 :arrow:

          • 胡倡萌说道:

            不是所有国内都要用插件 要不我的插件早上百个啦

          • 小雨说道:

            我也就用了三五个插件,这不是看他折腾代码老出错嘛 :eek:

          • Tokin说道:

            :razz: 解决了,下一步解决 读者墙和带图片的相关文章 :mrgreen:

  4. 前端开发-子任说道:
    2#

    用css3更方便了,呵呵。不过如果你的每排都是4个产品的话,直接用css背景图纵向延伸就可以了。 :razz:

    • 倡萌说道:

      还没接触css3 呵呵 背景图也是个办法 哈

  5. languh说道:
    1#

    支持技术活,来留个爪 :lol:

    • 倡萌说道:

      :razz: 呵呵 没啥含量

扫一扫,用手机访问本站

扫一扫,用手机访问本站