Question

我重新创建了我在这里遇到的问题： https://jsfiddle.net/DTcHh/10279/

/*main-navigation*/
/*view the list as a whole*/
.nav ul{
	list-style: none;
	background-color: #292929;
	text-align: center;
}

/*properties of each list item independently*/
.nav li {
	font-family: proximanova-regular-webfont;
	font-size: 30px;

	/*display in horizontal order*/
	display: inline-block; 
}


.nav a {
	text-decoration: none;
	color: #FFFFFF;
	display: block;
	
	padding-right: 60px;
	padding-left: 60px;
	
	padding-top: 30px;
	padding-bottom: 30px;
}



.nav a:hover, .nav a:focus,.nav a:active , #mainnav a.thispage{
	text-decoration: none;
	background-color: #FFFFFF;
	color: #292929;
	-o-transition:.675s;
	-ms-transition:.675s;
	-moz-transition:.675s;
	-webkit-transition:.675s;
	transition:.675s;
}

#main p {
	font-family: "proximanova light";
	color: #000000;
	font-size: xx-large;
	text-align: center;
	width: 44%;
	margin-left: 50%;
	margin-right: auto;

}

<div class="link_affix">
    <div data-spy="affix" data-offset-top="0">
        <div class="nav">
          <ul>
              <li><a href="index.html" class="thispage">HOME</a></li>
               <li><a href="resume.html">RESUME</a></li>
               <li><a href="projects.html">PROJECTS</a></li>
               <li><a href="contact.html\n">CONTACT </a></li>
          </ul>
        </div> 
	</div> <!-- affix -->
</div>


<article id="main">
  <p>
example textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample textexample 
</p>

</article>

我的目标是实现两件事：

将文字和导航栏居中。
将边框延伸到窗口的两端。（就像stackexchange那样）。

我完成了我的研究并尝试了很多东西，但无济于事。我很感激你的帮助。

Answer 1

通过添加以下样式，您应该能够使中殿居中并使其在整个屏幕上展开：

.affix {left:0; right:0;}

Updated fiddle

Answer 2

动态地，它正在添加一个类.affix。

您已将position:fixed至.affix覆盖为position:relative

 .affix {
  position:relative;
}

小提琴：https://jsfiddle.net/DTcHh/10284/

使用附加引导程序居中粘贴导航栏并扩展边框

2 个答案: