zoukankan      html  css  js  c++  java
  • 去掉最后一个列表项的右边框

     如下图,我们经常会在一些导航栏中见到,要求每行中最后一列的右边框消失,该如何实现呢?

    css3的nth-child(3n)是一种实现方法,但ie8-不兼容,在不考虑ie8-的情况下,确实是一种不错的方法

    li:nth-child(3n){
      border-right:none;
    }

    另一种方法是利用margin的负值,来隐层最左边的li的左边框:

    html结构:

    <div class="ul_containter">
       <ul class="ul_noneborder">
        <li><a href="#">列表1</a></li>
        <li><a href="#">列表2</a> </li>
        <li><a href="#">列表3</a> </li>
        <li><a href="#">列表4</a> </li>
        <li><a href="#">列表5</a> </li>
        <li><a href="#">列表6</a> </li>
        <li><a href="#">列表7</a> </li>
        <li><a href="#">列表8</a> </li>
     </ul>
    </div>

     给每一个li加一个左边框

     .ul_containter{overflow:hidden;}
     .ul_noneborder{width:300px;height:150px;background:#ccc; margin: 20px 0;padding:0;list-style: none; }
     .ul_noneborder li{float:left;width:79px;height:30px; padding:0 10px; margin-top:10px; border-left:1px solid #000000; text-align: center}
     .ul_noneborder li a{text-decoration: none;color:#080808;}

     

    给最外层的ul_containter加了overflow:hidden; 现在就可以让ul往左移动-1px,列表最左边的左边框就达到了隐藏的效果。

     .ul_containter{overflow:hidden;}
     .ul_noneborder{width:300px;height:150px;background:#ccc; margin: 20px 0;padding:0;list-style: none;margin-left:-1px; }
     .ul_noneborder li{float:left;width:79px;height:30px; padding:0 10px; margin-top:10px; border-left:1px solid #000000; text-align: center}
     .ul_noneborder li a{text-decoration: none;color:#080808;}

     

    这种方法利用的障眼法,给每个列表项加左边框,然后隐藏最左侧项的边框。

  • 相关阅读:
    ModernUI教程:使用预定义的页面布局
    ModernUI教程:第一个ModernUI应用(采用项目模板)
    ModernUI教程:第一个ModernUI应用(手动编写)
    ModernUI教程:目录 (完结)
    ScreenOS学习笔记
    子网划分
    Cisco IOS版本命名规则
    ThinkPHP的Auth类认证
    Excel 2007中自定义数字格式前要了解的准则
    float元素的父元素自适应高度
  • 原文地址:https://www.cnblogs.com/hfxm/p/6027155.html
Copyright © 2011-2022 走看看