去除列表最后一个li元素的border-bottom

去除列表最后一个li边框的方法
最新推荐文章于 2024-09-05 21:00:39 发布
最新推荐文章于 2024-09-05 21:00:39 发布
阅读量6.3k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38105960/article/details/95756636
博客介绍了去除列表最后一个li边框的两种方法。一是给最后一个li单独设类样式，重设border - bottom属性值或用负边距；二是用CSS3新选择器选最后一个li，li个数不确定时更方便。还提到通过overflow:hidden解决颜色不一致问题。

方法一：给最后一个li单独设置一个类样式，重新设置border-bottom的属性值为none，或者使用margin-bottom设置负边距。

  .lastli{
        margin-bottom:-1px ;
        /*或者使用border-bottom: none;*/
 }

方法二：使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不确定时更加方便。

 ul li:last-child {
        margin-bottom:-1px ;
        /*或者使用border-bottom: none;*/
}

如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。

@hxl
关注
删除列表元素中最后一个li元素
weixin_45747700的博客
10-26 774
1.删除列表元素中最后一个li元素 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script SRC="jquery.js"></script>...
CSS 最后一个元素 不要border-bottom
RosaChampagne的博客
04-12 5903
.goods-spec-item:not(:last-child) { border-bottom: 1rpx solid #EEEEEE; }
css 去除标签中最后一个子元素的margin（3种方式）
陈先生的博客
06-07 6385
最近遇到的在布局的时候，最后一个margin不想要，虽然很简单，但还是想总结一下。 先上公用代码： css * { padding: 0px; margin: 0px; box-sizing: border-box; } body { width: 1200px; margin: 0px auto; }
HTML列表中如何去掉最后一行边框
前端-CV全粘工程师
08-26 1054
vue，uniapp，或小程序中css删除列表最后一个的边框
循环数据，border-bottom或者border-top最后一条线不需要
早晚的博客
08-02 557
上边这个是针对border-bottom。如果是上边的应该是first-child。
小技巧：去掉每一行最后一个li的外边框/是否准许用户调整文本域的大小
北杨
09-09 1239
去掉每一行最后一个li的外边框 1.给每个li起类名单独去掉；（不建议使用） 2.将ul稍微多设置一点宽度，在ul的父容器中设置正常宽度、高度，并写overflow：hidden； 3.ul无父元素时可给li写margin-left：-value；在ul中写overflow：hidden。 是否准许用户调整文本域的大小 &lt;textarea&gt; 设置resize属性：none（...
前端如何设置最后一个子元素没有margin-bottom
最新发布
08-15
根据引用[2]中提到的方法：利用负margin-bottom去除列表最后一个li元素的border-bottom。但这里我们不是要去除border-bottom，而是要去除margin-bottom。 实际上，我们可以使用CSS选择器来选择最后一个子元素，并...
CSS3 :not()选择器实现最后一行li去除某种css样式
09-24
在常见的布局中，例如列表展示，我们可能需要为所有的列表项`li`添加一些样式，但不希望应用到最后一个元素上。例如，我们可能希望所有`li`都有下边框，但最后一个`li`不需要。在这种场景下，`:not()`选择器就能派上...
*{margin:0; padding:0;font-size:12px;} ul,ol,li list-style: none;} #nav {width: 100px;margin:0 auto;} #nav li{height:36px;} #nav li span{display: block;float: right; width: 35px; height: 35px;border-bottom-left-radius: 5px;border-top-left-radius: 5px;background: #7a6e6e url("插图11/toolbars.png") no-repeat;} #nav li:nth-of-type(1) span{background-position: 0px -15px;} #nav li:nth-of-type(2) span{background-position: 0px -57px;} #nav li:nth-of-type(3) span{background-position: 1px -106px;} #nav li:nth-of-type(4) span{background-position: 0px -156px;} #nav li:nth-of-type(5) span{background-position: 0px -200px;} #nav li:nth-of-type(6) span{background-position: 2px -265px;} #nav li p{ height: 35px; text-align: left; background: #c81623; color: #ffffff; border-bottom-left-radius: 5px; border-top-left-radius: 5px; line-height: 35px; padding-left: 10px; display: none; }添加详细完整注释
05-25
这段代码是用CSS来创建一个具有下拉菜单功能的导航栏。以下是每一行代码的注释： ```css *{margin:0; padding:0;font-size:12px;} /* 设置全局样式 */ ul,ol,li {list-style: none;} /* 去除列表默认样式 */ #nav {...
jquery last-child 列表最后一项的样式
12-09
这行代码的含义是：选中类名为 "con" 的元素下所有 ul 元素中的最后一个 li 子元素，并为这些元素添加 "no_btm_border" 类。这一类中会包含样式定义，比如可能给该列表项去除底部边框的样式，以便在视觉上区分最后一...
#menu ul li.last { border-right: 0; bottom: 8; content: ""; /*设置二 级菜单有下边框*/ padding-bottom:0px; }
05-14
- `li.last`表示选择该列表中的最后一个列表项； - `border-right: 0;`表示去掉右边框； - `bottom: 8;`表示设置该列表项距离底部的距离为8个像素； - `content: "";`表示设置该列表项的内容为空； - `padding-...
循环列表最后一条不显示borderBottom
weixin_30411819的博客
03-13 638
You could achieve this using some logic: return books.map((book, i) => { return( <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}> <Tex...
利用负margin-bottom去除列表最后一个li元素的border-bottom
aqaua808082的博客
05-10 386
负margin-bottom不会影响元素的实际大小，只会使得后面的元素上移 以第二个里为例，由于第一个li的margin-bottom导致第二个li被上拉1px，第二个li最上面的1px高度覆盖在第一个li之上，但由于background-color：transparent，第一个元素的boder-bottom能够正常显示出来 由于最后一个li -1px的margin-bottom，...
React循环列表最后一条不显示borderBottom
不会有人真的学前端吧
09-14 511
小记： 刚接触React，在做项目的时候遇到一个问题，就是在循环的列表中，其他数据的View加一个borderBottom，让最后的一个数据的样式没有 图示： 代码： return books.map((book, i) => { return( <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}> <Text style={(i.
去掉最后一个列表项的右边框
weixin_34332905的博客
11-03 1245
如下图，我们经常会在一些导航栏中见到，要求每行中最后一列的右边框消失，该如何实现呢？ css3的nth-child(3n)是一种实现方法，但ie8-不兼容，在不考虑ie8-的情况下，确实是一种不错的方法 li:nth-child(3n){ border-right:none; } 另一种方法是利用margin的负值，来隐层最左边的li的左边框： html结构： ...
li最后一个元素设置样式
qq_40386177的博客
06-01 590
li:not(:last-of-type) { border-bottom:1px solid black }
用CSS设置的border属性及标签不显示下划线
virtualjxc的专栏
07-09 2576
        1.在CSS样式表中并不能直接对表格元素的border元素进行设定，那么要想实现像Excel表格样式的表格怎么办呢？只能对表格和单元格分别加边框来实现，具体的是：对表格显示上边框和左边框，而让每个单元格显示下边框和右边框，这样一组合起来就达到了中的border一样的效果，具体的代码如下：TABLE.showTable   //设置表格边框 {  border-top:rgb(0
【css】获取最后一个li进行样式特殊处理
qq_43720551的博客
09-05 1113
每项列表项添加一个margin，最后一个元素不添加。子元素，以便CSS选择器能够正确地应用样式。伪类选择器来选择列表中的最后一个。有个列表，列表项之间有一段间隔。确保在你的HTML代码中，你可以使用 CSS 的。
深入了解：Java中获取 List中最后一个元素
热门推荐
牛肉胡辣汤
10-07 1万+
在Java编程中，我们经常会使用List来存储一组元素。有时候，我们需要获取List中的最后一个元素。本文将介绍几种获取List中最后一个元素的方法。本文介绍了三种在Java中获取List中最后一个元素的方法。通过使用get()方法、Java 8的stream API，以及Collections工具类，我们可以轻松地获取List的最后一个元素。根据实际需求和代码的复杂性，选择适合的方法来获取最后一个元素。希望本文能够对你在Java编程中获取List中最后一个元素的问题有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值