CSS消失的边界线问题

导语   消失的边界线问题  看看下图,经常会在一些导航栏中见到,要求每行中最后一列的右边框消失,如何在所有浏览器中最便捷优雅的实现?    如果是不需要兼容 IE8- ,那么使用 CSS3 新增的选择器无疑是一

  消失的边界线问题

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

  

608782-20161011103637321-450120553

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

  JavaScript

// 使用伪类选择器,选择第 3n 个元素去掉边框

  1. li:nth-child(3n){ 
  2.   border-right:none
  3.   } 

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

  不过这样都不够优雅。

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

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

  XHTML   

  1. <div class="ul-container"> 
  2.     <ul> 
  3.         <li>测试</li> 
  4.         <li>消失</li> 
  5.         <li>边界线</li> 
  6.         <li>右侧</li> 
  7.         <li>边界线</li> 
  8.         <li>消失</li> 
  9.         <li>测试</li> 
  10.     </ul> 
  11. </div> 

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

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

  CSS

  1. .ul-container, 
  2.  
  3.   ul{ 
  4.  
  5.   width:300px
  6.  
  7.   } 
  8.  
  9.   li{ 
  10.  
  11.   float:left
  12.  
  13.   width:99px
  14.  
  15.   border-left:1px solid #999
  16.  
  17.   } 

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

608782-20161011103832352-670395593

 

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

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

  CSS

  1. .ul-container{ 
  2.  
  3.   overflow:hidden
  4.  
  5.   } 
  6.  
  7.   ul{ 
  8.  
  9.   margin-left:-1px
  10.  
  11.   } 

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

  

608782-20161011103909977-1473235634

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

http://www.aseoe.com/ true CSS消失的边界线问题 http://www.aseoe.com/show-11-897-1.html report 3668   消失的边界线问题  看看下图,经常会在一些导航栏中见到,要求每行中最后一列的右边框消失,如何在所有浏览器中最便捷优雅的实现?    如果是不需要兼容 IE8- ,那么使用 CSS3 新增的选择器无疑是一
TAG:CSS 边界线
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-11-897-1.html
[ 扫一扫,在手机上阅读 ]

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)