我制作了一个带有导航的页眉，并将宽度设置为 100%。我把它放在容器之外，所以只有标题可以占据整个页面，其他内容将是 960px。现在我的网站标题和导航太靠左了，我试图将它居中并将 960px 容器与 margin:0 auto 匹配，但这没有用。我怎样才能让我的网站标题与 960px 容器开始的位置以及导航相匹配？我想将导航空间更靠右。
jsfiddle - http://jsfiddle.net/wphkyhw8/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="main_header">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<section class="main_content">
<article>
first article
first article
first article
first article
first article
first article
</article>
</section>
<footer>
copyright 2014
</footer>
</div> <!-- end of container -->
</body>
</html>
*{
margin:0;
padding:0;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
border:1px solid black;
margin:0 auto;
}
.main_title{
float:left;
padding:20px;
font-size:25px;
}
.main_header{
background-color:#000000;
color:#ffffff;
width:100%;
height:80px;
}
.main_nav{
float:left;
}
.main_nav ul li{
float:left;
padding:30px 10px;
}
.main_nav ul li a{
text-decoration:none;
color:#ffffff;
}
最佳答案
您可以简单地通过将 header 的内容包装在一个具有 .container 类的附加 div 中来实现这一点
<header class="main_header">
<div class="container">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<!-- Navigation -->
</nav>
</div>
</header>
最好使用另一个类名将border 应用于内容容器。
.container {
width:960px; margin:0 auto; /* Removed the border from this selector */
}
<div class="container border"> <!-- Content --> <div>
.border { border:1px solid black; /* Added here */ }
关于html - 居中标题/导航，其宽度大于包含所有其他内容的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25795746/