4

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

这是我的问题：

功能区导航溢出：隐藏；在 css 中隐藏功能区的底部。但是，要让我的徽标出现在导航的中间，我需要将它包含在 DIV 中。有溢出：隐藏；上，它裁剪我的标志（因为它溢出），我的导航看起来像这样：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忍受像我这样的新手，而不是扯掉你的头发。
最好的，
劳拉

4

1 回答 1

2

我要做的是将功能区中的锚设置为溢出隐藏，除了持有徽标的锚

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

小提琴

如果您的目标浏览器不支持:not，则为除带有徽标的锚点之外的所有锚点提供一个类。

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

小提琴

于 2012-05-20T04:57:39.857 回答