.bg {
opacity:100%;
margin-right:auto;
margin-left:auto;
background-image:url(../Images/navbg.png);
background-size:84.5em 6em;
background-position:center;
background-repeat:no-repeat;
width:84.5em;
height:2.6875em;
z-index:500;
}
.fixed {
position:fixed;
top:0;
left:0;
z-index: 20;
}
@media (max-width:1219px){
.fixed{
position:absolute;
width:84.5em;
top:0;
left:0;
margin: 0em 0px 0px 0em;
}
}
ul {
height: 1.25em;
width: 68em;
font-family:Verdana, Geneva, sans-serif;
position:relative;
}
li {
float: left;
list-style: none;
margin: 0em 0em;
text-transform: uppercase;
letter-spacing: .25em;
color: #000;
font-family:Verdana, Geneva, sans-serif;
border-top-left-radius: 1em 1em;/*Rounded Corners*/
border-bottom-left-radius: 1em 1em;/*Rounded Corners*/
border-top-right-radius: 1em 1em;/*Rounded Corners*/
border-bottom-right-radius: 1em 1em;/*Rounded Corners*/
}
@media (max-width:1219px) {
li {
width:auto;
height:1.45em;
line-height:1.5em;
padding:0px;
}
}
#nav{
margin: -2.45em auto 0px 9.5em;
}
#nav a{
text-decoration: none;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(102,102,102,.0);
font-family:Verdana, Geneva, sans-serif;
color:#525252;
font-size:.77em;
position:relative;
display:block;
line-height:2em;
}
@media (max-width:1219px) {
#nav a{
text-decoration: none;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(102,102,102,.0);
font-family:Verdana, Geneva, sans-serif;
color:#525252;
font-size:11px;
position:relative;
display:block;
line-height:2em;
}
}
#nav a:hover{
color: #fff;
text-shadow: -2px 2px 2px #C9C9C9;
font-size:.77em;
position:relative;
}
@media (max-width:1219px) {
#nav a:hover{
color: #fff;
text-shadow: -2px 2px 2px #C9C9C9;
font-size:11px;
position:relative;
}
}
.blockhover{
border-top-left-radius: 0em 0em;/*Rounded Corners*/
border-bottom-left-radius: 0em 0em;/*Rounded Corners*/
border-top-right-radius: 0em 0em;/*Rounded Corners*/
border-bottom-right-radius: 0em 0em;/*Rounded Corners*/
}
ul.drop a {
color: #fff;
font-family: Verdana;
font-size: .875em;
text-decoration: none;
position:relative;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
color: #fff;
position:relative;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: .3125em .625em;
}
ul.drop li:hover{
position: relative;
z-index: 599;
cursor: default;
background: #CDBF85;
color:#fff;
}
ul.drop li.hover, {
position: relative;
z-index: 599;
cursor: default;
background: #C5B369;
color:#fff;
}
/*dropdown background*/
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 12.1875em;
background:#D3D3D3;
height:auto;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -.125em;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible;
}
ul.drop li.hover {
-webkit-transition: all .75s ease-in;
-moz-transition: all .75s ease-in;
-ms-transition: all .75s ease-in;
-o-transition: all .75s ease-in;
transition: all .75s ease-in;
}ul.drop li.hover:active {
background: #BCBA72;
}
我和其他几个人正在重新设计我们的高中网页as it desperately needs it！某种奇怪的边际问题正在使页面右侧出现空白。我们无法弄清楚拯救我们生命的原因是什么。我们正在尝试实现固定导航，我们认为这是导致它的原因，但我们只是不知道代码中的位置。
Here is our most current version we have live，如果有人愿意验证我们的语法或解释更简单的方法来实现更流畅的固定导航，那就意味着很多！
<div class="fixed" align="center">
<div class="bg"></div>
<div id="nav">
<ul class="drop hover">
<li><a href="http://lshs.leesummit.k12.mo.us/">Home</a></li>
<li><a href="#">Academics</a>
<ul>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/apluslshs/index.html">A+</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/apilshs/index.html">API</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/cslshs/index.html">Community Service</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/iblshs/index.html">IB at LSHS</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/guidance/secprogramofstudy/secprogramofstudy.pdf">Programs of Study</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/secss/default.htm">Summer School</a></li>
</ul>
</li>
<li><a href="http://lshs.leesummit.k12.mo.us/activitieslshs/index.htm">Clubs/Activities</a></li>
<li><a href="http://www.ihigh.com/lstigers/index.html">Sports</a></li>
<li><a href="#">Calendars</a>
<ul> <li class="blockhover"><a href="http://embed.revdel.com/4/allschool_monthview.php">All School Calendar</a></li>
<li class="blockhover"><a href="http://embed.revdel.com/4/athleticcalendar.php">Athletic Calendar</a></li>
<li class="blockhover"><a href="http://www.lsr7.org/district/about-us/">District Calendar</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/calendar/calendar.pdf">LSHS.PDF</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/tutoring/calendar.pdf">Tutoring Calendar</a></li>
</ul>
</li>
<li><a href="#">Counseling</a>
<ul> <li class="blockhover"><a href="http://sites.lsr7.org/lshscounseling">Counseling Center</a></li>
<li class="blockhover"><a href="http://www.lsr7.org/wp-content/uploads/2012/07/2013-2014-POS-Complete.pdf">Program of Study</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/transcriptslshs/instructions.pdf">Transcripts</a></li>
</ul>
</li>
<li><a href="#">Media Center</a></li>
<li><a href="#">Parents/Alumni</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/alumnilshs/index.html">Alumni</a></li>
<li class="blockhover"><a href="http://lshstigerboosters.webs.com/">Booster Clubs</a></li>
<li class="blockhover"><a href="#">Building Emails</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/hoflshs/index.html">Hall of Fame</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/nutrition/default.htm">Nutrition Services</a></li>
<li class="blockhover"><a href="http://www.lshsptsa.com/">PTSA/Project Grad</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/plannerlshs/planner.pdf">Student Handbook</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/transcriptslshs/instructions.pdf">Transcripts</a></li>
</ul>
</li>
<li><a href="#">Staff</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/alpha.html">Alphabetical Listing</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/index.html">Staff by Department</a></li>
</ul>
</li>
<li><a href="#">Student Life</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/artgallery/art.html">Art Gallery</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/schedule/index.html">Bell Schedule</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/courtwarming/index.html">Courtwarming 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/activitieslshs/handbook/R7%20DistHB.pdf">District Handbook</a></li>
<li class="blockhover"><a href="#">Fall Assembly 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/faqlshs/index.html">FAQ</a></li>
<li class="blockhover"><a href=" http://lshs.leesummit.k12.mo.us/eventslshs/schedule/index.html#finals">Finals Schedule</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/fe/index.html">Foreign Exchange</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/homecoming/index.html">Homecoming 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/jrpage/index.html">Junior Information</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/sro/index.html">Recource Officer</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/srpage/index.html">Senior Information</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/somlshs/index.htm">Student of the Month</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/plannerlshs/planner.pdf">Student Planner</a></li>
</ul>
</li>
</ul>
</div><!--Nav Close-->
</div><!--.Fixed Close-->
<br />
答案 0 :(得分：1)
将right: 0添加到.fixed，导航将自动拉伸并居中。
此外，您可以在页面上清理许多内容，其中之一就是不必要地使用z-index。首先，你不应该像你一样使用财产;第二，你可以保持简单，这意味着，当你只需使用597，10等时，就不应该使用20这样的数字。
答案 1 :(得分：0)
实际上是在margintiger.css中设置了一个边距 - 左边你也设置了宽度设置为100％并且边距在外面，所以任何边距都会为你的块添加宽度。
如果有其他人看到此页面，只想添加这个漂亮的小页面以供参考。 http://www.w3.org/TR/CSS2/box.html