Question

我已经尝试了几个东西来整体移动导航栏，但我卡住了。导航栏的容器需要根据导航栏的大小来获取其大小。链接量将定期更改，因此我无法使用固定宽度。

无论我在父标签中做什么，在css for li中的float：left将它保持在左侧。我尝试了很多东西，但我终于决定承认我只是在我脑海里。

继承人css：

#main {
    margin: 0px auto;
}

#nav_bar {
    height: 72px;
    width: auto;
    text-align:center;
}


#main_nav { list-style: none; margin: 0; padding: 0; display: inline;}
#main_nav li { float:left;}
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; } 

#home { background: url(NavBar/home.jpg); width: 105px; }
#home:hover { background: url(NavBar/home.jpg); 0 0 !important; }

#main_nav:hover li a#home { background-position: -232px center; }


#logo { background: url(NavBar/logo.jpg); width: 116px; }
#logo:hover { background: url(NavBar/logo.jpg); 0 0 !important; }


#main_nav:hover li a#logo { background-position: -232px center; }


#photo { background: url(NavBar/photo.jpg); width: 116px; }
#photo:hover { background: url(NavBar/photo.jpg); 0 0 !important; }


#main_nav:hover li a#photo { background-position: -232px center; }


#animation { background: url(NavBar/animation.jpg); width: 116px; }
#animation:hover { background: url(NavBar/animation.jpg); 0 0 !important; }


#main_nav:hover li a#animation { background-position: -232px center; }


#print { background: url(NavBar/print.jpg); width: 116px; }
#print:hover { background: url(NavBar/print.jpg); 0 0 !important; }


#main_nav:hover li a#print { background-position: -232px center; }


#other { background: url(NavBar/other.jpg); width: 116px; }
#other:hover { background: url(NavBar/other.jpg); 0 0 !important; }


#main_nav:hover li a#other { background-position: -232px center; }

并且继承了html：

<body>
<div id="main">
<div id="nav_bar">
<ul id="main_nav">
            <li><a href="" id="home">Home Page</a></li>
            <li><a href="" id="photo">Photos</a></li>
            <li><a href="" id="print">Print</a></li>
            <li><a href="" id="logo">Logos</a></li>
            <li><a href="" id="animations">3D</a></li>
            <li><a href="" id="other">Other</a></li>
        </ul> 
</div>
<div id="footer">Copyright</div>
</div>

</body>

Answer 1

在这里你http://jsfiddle.net/5PXEe/1/

这使ul居中，并且可以很好地扩展新的菜单项

你的main_nav需要display: inline-block;

中心对齐水平导航栏的问题

1 个答案: