【发布时间】：2017-02-06 08:02:57
【问题描述】：
编辑： 问题已经解决了。谢谢你的帮助。
我似乎无法让导航栏保持整个页面的宽度并同时保持居中。它是一个粘性导航栏，它的那一部分按预期工作。但是，当导航栏锁定到位时，它不会像预期的那样一直锁定到顶部。该网站处于非常早期的开发阶段，但在解决这个烂摊子之前我真的无法继续。随意忽略我的一些评论标签中的讽刺。这是我在做某事时发泄沮丧的方式。
我已经访问过的链接以提供帮助：
A Full-Width Centered Navigation Bar
我注释掉了我所有的导航 CS，并用他们的替换它。它是一个很好的居中导航栏，但它不像我想要的那样跨越页面的整个宽度。我实际上希望链接可以延伸。将 800px 值更改为其他值会强制链接到屏幕左侧。Bootstrap navbar will not center no matter what 按照说明将所有内边距设置为 0 时，它所完成的只是缩小导航栏的整体高度。
Why is right-aligned text in my navbar shifted too far to the right?
不完全相关，但我认为它可以阐明我的问题。它所做的只是指出用户正在使用的引导版本中的一个错误。我自己没有使用引导程序。Why won't my navbar center?
其中一个 cmets 建议使用负边距左数。这确实产生了积极的影响，尽管我宁愿解决问题的根源也不愿使用修补程序。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="style.css">
<script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. -->
<div class="status"></div>
<div class="container"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->
<center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>
<!-- The navigation portion... dear God... here is where it all usually goes wrong. -->
<nav>
<ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. -->
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... -->
<br/><br/>
<center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
<br/>
<br/>
<p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
</div>
CSS：
html {
padding: 0;
margin: 0;
background-color: #000;
}
body {
font-family: Helvetica, sans-serif;
font-size: 93%;
line-height: 1.5em;
padding: 40px 0;
margin: 0;
color: #7d0000;
}
a,
a:link,
a:visited {
color: blue;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0;}
p {margin: 0 0 1em 0;}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
h1 {
background-color: #305782;
color: #FFF;
padding: 60px 25px;
margin: 0;
}
nav {
z-index: 500;
background-color: #000;
}
.nav-placeholder {
margin: 0 0 40px 0;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000;
}
.fixed .nav-inner {
padding: 0 20px;
}
.fixed .nav-inner-most {
max-width: 100%;
margin: 0 auto;
background-color: #000;
}
nav ul {
display: table;
width: 100%;
list-style: none;
}
nav ul li {
display: table-cell;
text-align: center;
}
nav ul li a:link,
nav ul li a:visited {
display: block;
text-decoration: none;
padding: 10px 25px;
background-color: #000;
border: 2px solid #7d0000;
color: #7d0000;
font-size: 90%;
font-weight: bold;
}
nav ul li a:hover {
background-color: #28bfa1;
color: #FFF
}
/* This seems to have an undesired effect, but may be necessary for later.
The border-right: none; attribute is especially annoying...
nav ul li:last-child a:link,
nav ul li:last-child a:visited {
border-right: none;
}
*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JS：
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
另外，这里是JSFiddle 和网站：http://www.wolvesofthedust.com/
【问题讨论】：
-
将
padding:0;margin:0;添加到nav ul -
谢谢！我不敢相信我忽略了这么小的事情。
-
@Shadowfang 我知道它现在有效，但请考虑发布答案（代表 Michael Coker）并将其标记为正确。
-
@xlm 我就是这样做的。我实际上想知道如何正确执行此操作，因此对初始帖子进行了编辑。感谢您清理它。
标签： javascript jquery html css