1

嗨，我正在尝试创建一个个人网站，并且在我的标题样式方面遇到了一些问题，特别是与定位有关。这就是我的标题现在的样子：

在此处输入图像描述

中间的 NA 实际上是一个应该与黑色边框重叠的图像圈，但我似乎不知道该怎么做。这是我的标记：

 <section class="top-bottom-border overflow">
    <div class="center">
        <ul id="social">
            <li><a href="http://www.facebook.com/nistor.alexandru.89" target="_blank"><img src="images/social/FacebookIco.png"></a></li>
            <li><a href="https://twitter.com/aleczandru89" target="_blank"><img src="images/social/TwitterIco.png"></a></li>
            <li><a href="http://www.linkedin.com/profile/view?id=225866296&trk=tab_pro" target="_blank"><img src="images/social/LinkedinIco.png"></a></li>
            <li><a href="http://www.linkedin.com/profile/view?id=225866296&trk=tab_pro" target="_blank"><img src="images/social/LinkedinIco.png"></a></li>
        </ul>
    </div>
</section>
<nav class="center overflow" id="menu">
    <ul class="float-left">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
    <ul id="logo">
        <li><a href="#" title="About me"><img src="images/Logo.png" alt="logo"/></a></li>
    </ul>
    <ul class="float-right">
        <li><a href="#">Skills</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact me</a></li>
    </ul>
</nav>
<section class="top-bottom-border"></section>

这是我的CSS：

   .center {
        margin: 0 auto;
        width: 960px;
    }
.overflow {
    overflow: hidden;
}
        .top-bottom-border {
        background: url(../images/top-bottom-border.jpg);
        height: 37px;
    }
    ul#social{
        float: right;
    }
    ul#social li {
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px;
    }
    nav#menu{
        position: relative;
        height: 50px;
    }
    nav#menu li{
        display: inline-block;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    nav#menu .float-left{
        padding-left: 150px;
    }
    nav#menu .float-left li{
        margin-right: 25px;
    }
    nav#menu .float-right{
        padding-right: 150px;
    }
    nav#menu .float-right li{
        margin-left: 25px;
    }
    ul#logo{
        position: absolute;
        left: 400px;
        top:-40px;
    }

如何使中心的图像与两个黑色边框重叠？

4

2 回答 2

2

<nav class="center overflow" id="menu">没有z-index开始行动，因为你已经overflow: hidden为你的#nav所以溢出它的标志不会显示。从中删除溢出类将修复您的徽标显示。

编辑据我所知，您的布局和目标，您可能还想添加float: left到nav#menu .float-leftfloat :rightnav#menu .float-right

于 2013-04-18T18:31:05.317 回答
0

您可以尝试将 style="z-index: 5" 添加到徽标的 li 或 ul

于 2013-04-18T18:15:42.070 回答