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

时间:2011-01-09 18:01:18

标签: html css css3

我有一个使用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

1 个答案:

答案 0 :(得分:1)

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

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

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