Question

我有一天的CSS设计问题，现在减半，这让我疯了。我有一个水平导航栏，里面有一个无序列表。每个列表项包含网站内页面的锚点（或超链接），CSS如下：

nav#main{
    background:#000;
    width:100%;
    overflow:auto;
}
nav#main ul{
    list-style:none;
}
nav#main li{
    float:left;
    display: block;
    overflow:auto;
}
nav#main a{
    display:block;
    padding:1em;
    color:#FFF;
    text-transform:uppercase;
    font-size:1.6em;
}
nav#main a:hover{
    background:#EF7E05;
    background-clip:padding-box;
    border-width:0 0 15px 0;
    border-image:
        url('../images/nav.png')
        0 
        0
        25
        stretch;
}

HTML：

<nav id="main">
    <ul>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
    </ul>
</nav>
<div id="contentArea">
    <!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>

这就像它应该有效一样。

然而，我想要完成的是边界图像显示在导航栏之外，并且它不会将contentArea向下推动25px。有什么想法吗？

我也尝试用a.hover :: after绝对定位一个块。这样可以很好地工作，但是块的宽度不能设置为等于a。也许关于这个的任何想法？

Answer 1

您需要使用clear而非overflow:visible

清除浮动元素

如果这样做，您可以使用绝对定位来创建边框：

nav#main{
    background:#000;
    width:100%;
}
nav#main:after {
    content:'';
    display:block; 
    clear:both;
}
nav#main ul{
    list-style:none;
}
nav#main li{
    float:left;
    display: block;
    overflow:visible;
}
nav#main a{
    display:block;
    padding:1em;
    color:#FFF;
    text-transform:uppercase;
    font-size:1.6em;
    position:relative;
    overflow:visible;
}
nav#main a:hover{
    background:#EF7E05;
}
nav#main a:hover:after{
    background-clip:padding-box;
    content:'';
    position:absolute;
    top:100%;
    left:0; 
    right:0;
    border-width:0 0 15px 0;
    border-image:
        url('../images/nav.png')
        0 
        0
        25
        stretch;
}

Example

我注意到边框图片的东西在firefox中不起作用，或者这样会给你带来同样的效果，并且浏览器更友好：

nav#main a:hover:after{
    background-clip:padding-box;
    content:'';
    position:absolute;
    top:100%;
    left:0; 
    right:0;
    height:15px;
    background: url('../images/nav.png') left top no-repeat;
    background-size: 100% 15px;
}

Example

CSS＆＃34;绝对＆＃34;定位边界图像

1 个答案: