我已经尝试了几件事来将导航栏作为一个整体移动，但我被卡住了。导航栏的容器需要根据导航栏的大小获取其大小。链接的数量会定期变化，所以我不能使用固定的宽度。
无论我在父标签中做什么，float: left 在 li 的 css 中都会将其保持在左侧。我已经尝试了很多事情，但我最终决定承认我只是在我的头上。
继承人的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>