Question

我有一个使用CSS Sprites制作的导航。问题是我在导航的两半中间有网站的标识。所以我所做的就是将导航分为两部分; leftNav和rightNav。这减少了我的链接功能代码，但这是我的问题。最初leftNav和rightNav是他们自己的DIV，但在尝试清理我的代码后，我创建了两个leftNav和rightNav，它们位于一个名为navigation的div中：

<div id="navigation" style="position:absolute; width:789px; height:29px; left:0; bottom:0; z-index:0; background:#ccc;">

        <ul id="leftNav" style="left:0;"> 
            <li><a class="leftLinkActive" href="index.html"><span>Home</span></a></li> 
            <li><a class="middleLink" href="#"><span>About</span></a></li>
            <li><a class="rightLink" href="#"><span>Flavors</span></a></li> 
        </ul>
        <ul id="rightNav" style="right:0;"> 
            <li><a class="leftLink" href="#"><span>Catering</span></a></li> 
            <li><a class="middleLink" href="#"><span>Community</span></a></li>
            <li><a class="rightLink" href="#"><span>Contact</span></a></li> 
        </ul>
    </div>

这是css：

#leftNav, #rightNav{
position:relative;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
width:324px; 
height:29px;
}



#leftNav li, #rightNav li{
    float:left;
}
#navigation #leftNav a{
    display: block;
    background-image: url("../images/leftNav.png");
    padding-top: 29px;
    text-decoration: none;
}
#navigation #rightNav a{
    display: block;
    background-image: url("../images/rightNav.png");
    padding-top: 29px;
    text-decoration: none;
}

所以我的问题是leftNav出现在它应该的位置，但我根本看不到rightNav。附：这是我第一次真正编写网站编码，在此网站之前，我只完成了设计方面的工作。

我忘了提到链接的翻转只是移动了bg的位置。我遗漏了其余部分或网站的代码，因为它与问题无关。谢谢，meepz

Answer 1

在没有现场演示（或jsFiddle / jsBin）的情况下弄清楚你想要什么是相当烦人的，但如果我做出这些改变，我至少可以看到ul：

<ul id="leftNav" style="float:left"> 
...
<ul id="rightNav" style="float:right">

如果这不是你想要的，我建议你展示设计图像的相关部分。

<ul>的位置不像我希望的那样工作</ul>

1 个答案: