Я хотел бы использовать навигационное меню полной ширины, а оставшаяся часть страницы имела ширину 960 пикселей.
Ссылки в меню навигации должны быть центрированы над телом шириной 960 пикселей.
Следующий код выравнивает навигационное меню с левой стороны. Что мне нужно включить, чтобы иметь ссылки на центр ссылок?
HTML
<div class="nav">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="wrapper">
<div class="main">
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
</div>
</div>
CSS
.wrapper {
background-color: red;
width: 960px;
margin: 0 auto;
}
.nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.nav ul {
list-style: none;
width: 960px;
margin: 0 auto;
padding: 0;
}
.nav li {
float: left;
}
.nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
.nav li:first-child a {
border-left: 1px solid #ccc;
}
.nav li a:hover {
color: #c00;
background-color: #fff;
}
.nav ul {
list-style: none;
width: 960px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.nav li {
display: inline-block;
}
вам не следует "плавать" ссылки, если вы хотите, чтобы они отображались в центре. Вместо этого попробуйте использовать "display: inline-block" для элементов навигационных ссылок (nav li) и добавьте "text-align: center" к сам список (nav ul)
пытаться
.nav { text-align: center; }