1 min read

伸出包含块的子元素

一个菜单栏中,突出当前菜单项的背景色是很常见的:

如果要求当前菜单项的背景伸出父元素顶部1像素又如何?

先来看上例的代码:

<ul class="nav-menu clearfix">
    <li class="nav-menu__item active"><a href="">第一个</a></li>
    <li class="nav-menu__item"><a href="">我第二</a></li>
</ul>

<style>
    .nav-menu{
        background:#0175cc;
        height:28px;
    }
    .nav-menu__item{
        float:left;
        font-size:14px;
        line-height:2;
        margin:0 10px;
        list-style:none;
        text-align:center;
    }
    .nav-menu__item a{
        float:left;
        background:#333;
        color:#fff;
        padding:0 10px;
    }
    .nav-menu__item.active a{
        background:red;
    }
</style>
  • 给 a 元素添加1像素的顶部边框:

    .nav-menu__item a {border-top:1px solid #fff;}
    

    因为 a 的高度超出父元素,父元素默认 overflow 的内容可见,所以呈现的结果如下:

  • 把 a 元素向上偏移1像素

    这里我们通过 position:relative 来提升 a 元素的位置:

    .nav-menu__item a {position:relative;top:-1px;}
    

    因为边框颜色是白的,与大包含块背景色一样,所以我们看不到顶部边框,如下:

  • 修改当前菜单项的顶部边框颜色

    .nav-menu__item.active a {border-top-color:red;}
    

于是子元素就伸出父元素顶部1像素。

因为 IE6 会自动扩展包含块的高度,所以上述方法如果要兼容 IE6,需要多做一个处理:

.lt-ie7 .nav-menu__item{height:28px;overflow:hidden;}

.lt-ie7 的用法来自 HTML5Boilerplate

完整的代码如下:

<ul class="nav-menu clearfix">
    <li class="nav-menu__item active"><a href="">第一个</a></li>
    <li class="nav-menu__item"><a href="">我第二</a></li>
</ul>

<style>
    .nav-menu{
        background:#0175cc;
        height:28px;
    }
    .nav-menu__item{
        float:left;
        font-size:14px;
        line-height:2;
        margin:0 10px;
        list-style:none;
        text-align:center;
    }
    .lt-ie7 .nav-menu__item{
        height: 28px;
        overflow: hidden;
    }
    .nav-menu__item a{
        float:left;
        background:#333;
        color:#fff;
        padding:0 10px;
        border-top:1px solid #fff;
        position: relative;
        top:-1px;
    }
    .nav-menu__item.active a{
        background:red;
        border-top-color: red;
    }
</style>

效果如下:

附:Demo

报告问题 修订