Question

晚上好StackOverflowers！
我正在使用我的代码遇到似乎是一个问题22。我正在使用带有图像徽标的新CSS3功能区导航。

这是我的问题：

功能区导航在css中有溢出：隐藏; 以隐藏功能区的底部部分。但是，要在导航中间获取我的徽标，我需要将其包含在DIV中。使用 overflow：hidden; ，它会裁剪我的徽标（因为它溢出），我的导航如下所示：
http://i.stack.imgur.com/JoXyJ.png

我不想切断我的徽标，我删除了溢出：隐藏; 然后我遇到导航下显示的功能区标签的问题，如下所示： http://i.stack.imgur.com/bZE26.png

似乎没有简单的解决方案。作为一名新开发者，我发现我开始把头发拉出来了。是否有一种解决方法可以使色带尾部消失，并允许我的徽标显示？

这是我的HTML代码：

<body>
    <div class="ribbon">
        <a href='#'><span>Home</span></a>
    <a href='#'><span>Portfolio</span></a>
    <a href="index.php"><img id="logo" src="img/logo-grungewh.png" alt="logo"/></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Contact</span></a>
</div>

和我的CSS代码：

/************************* 
* Left Ribbon Navigation *
**************************/
.ribbon {
    margin-top:6em; 
}

.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
background:#D55E96;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon a:link, .ribbon a:visited { 
color:#000;
text-decoration:none;
float:left;
height:3.5em;
}

/********************* 
* Logo In Navigation *
**********************/
#logo {
margin-top:-5em;
z-index:3;
border:0;
}

老实说，任何建议或指导都会真正赞赏。我已经阅读了许多已发布在此上的帖子，但它们似乎并没有出现在同一波上。感谢Overflowers忍受像我一样的新手，而不是撕掉你的头发。
最好，
劳拉

Answer 1

我要做的是将功能区中的锚点设置为隐藏，但保留徽标的锚点

.ribbon a:not(#logo-anchor){
    overflow:hidden;
}

Fiddle

如果你的目标浏览器不支持:not，那么除了带徽标的锚之外，给出所有锚点。

.ribbon a.overflow-hidden{
    overflow:hidden;
}

Fiddle

CSS：溢出：隐藏 - 隐藏特定元素和显示其他元素的问题

1 个答案: