• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

CSS边界线消失的问题详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

先来看看下图,经常会在一些导航栏中见到,要求每行中最后一列的右边框消失,如何在所有浏览器中最便捷优雅的实现?

如果是不需要兼容 IE8- ,那么使用 CSS3 新增的选择器无疑是一种好方法。

// 使用伪类选择器,选择第 3n 个元素去掉边框
li:nth-child(3n){ 
  border-right:none; 
  } 

当然,如果个数确定也不多,给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者,使用 table 虽然繁琐一点,不过也能实现。

不过这样都不够优雅。

这里有个小技巧,就是通过添加反向边框并且增加一个负的 margin 来实现。

首先,假定我们的 ul 结构如下:

<div class="ul-container"> 
    <ul> 
        <li>测试</li> 
        <li>消失</li> 
        <li>边界线</li> 
        <li>右侧</li> 
        <li>边界线</li> 
        <li>消失</li> 
        <li>测试</li> 
    </ul> 
</div> 

如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,我们的 ul 和 ul-container 宽度都设为 300px 。

最重要的是,每个 li 设置一个左边框而不是右边框:

.ul-container, 
 
  ul{ 
 
  width:300px; 
 
  } 
 
  li{ 
 
  float:left; 
 
  width:99px; 
 
  border-left:1px solid #999; 
 
  } 

我们会得到如下这样的结果:

接下来,我们将容器 ul-container 设置为 overflow:hidden ,并且将 ul 左移一个像素 margin-left:-1px。

这样 ul 中第一列的所有边框都因为左移了一像素并且被 overflow:hidden 而消失了,造成了下一个 li 的右边框看着像左边框一样,其实只是个障眼法:

.ul-container{ 
 
  overflow:hidden; 
 
  } 
 
  ul{ 
 
  margin-left:-1px; 
 
  } 

效果图就如一开始图示所示:

这种做法可以适应不同 li 个数不同行数的所有情况,因为每个新添加的 li ,都会生成一个左边框与上一个 li 元素分开,只是在视觉上看上去像是上一个 li 元素的右边框。

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
CSS3实现多背景模拟动态边框的效果发布时间:2022-06-21
下一篇:
CSS3毛玻璃效果(blur)有白边问题的解决方法发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap