CSS如何实现边界线消失-创新互联

这篇文章主要介绍了CSS如何实现边界线消失，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

为富锦等地区用户提供了全套网页设计制作服务，及富锦网站建设行业解决方案。主营业务为成都做网站、网站设计、富锦网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

如果是不需要兼容 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 元素的右边框。

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS如何实现边界线消失”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!

网页名称：CSS如何实现边界线消失-创新互联
文章网址：https://www.cdcxhl.com/article34/cojepe.html

成都网站建设公司_创新互联，为您提供域名注册、定制开发、网站建设、品牌网站设计、云服务器、Google

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联