Невозможно выровнять навигационную панель под заголовком image

Я пробовал в течение 2 часов, чтобы выровнять навигационную панель хорошо под заголовком, но это просто не будет. Первые 4 элемента списка выровнены в строке, но последний идет под ними, + навигационная панель не центрирована, как я хочу. Я искал ответы везде, и ничего не работает. Помощь будет с благодарностью. стр. Я новичок в css и html, поэтому будьте осторожны.Невозможно выровнять навигационную панель под заголовком image

<html> 
<head> 
<style> 
body { 
    background-image: url("http://i.imgur.com/SwKXk23.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
} 
body { 
    margin: 0; 
} 
.header { 
    width: 100%; 
    height: auto; 
    background-color: none; 
    padding-top: 24px; 
} 
.headerContent { 
    width: 1024px; 
    height: auto; 
    margin: 0 auto; 
} 
.headerContent a img { 
    width: 659px; 
    height: 144px; 
    margin: 0px auto; 
    display: block; 
} 
.nav { 
width:750px; 
margin:0 auto; 
list-style:none; 
} 
.nav li { 
float:left; 
} 
.nav a { 
display:block; 
text-align:center; 
width:150px; /* fixed width */ 
text-decoration:none; 
} 
.nav ul li{ 
    height: 40 px; 
    background: #A14F53; 
} 
.nav ul li{ 
list-style-type: none; 
width: 150px; 
float: left; 
} 
.nav ul li a{ 
text-decoration: none; 
color: black; 
line-height: 40px; 
display: block; 
border-right: 1px solid #CCC; 
text-align:center; 
} 
.nav ul li a:hover{ 
background-color:#F9C1B5; 
} 
.headerBreak{ 
width: 100%; 
height: o%; 
border bottom: 2px solid #128e75; 
} 

</style> 
</head> 

<body> 
<div class="background"> 
<div class="header"> 
     <div class="headerContent"> 
      <a href="#"> 
       <img style="border:0;width:900px;height:250px;" alt="" 
      title="" src="http://i.imgur.com/5NhCbxu.png"> 
      </a> 
     </div> 
    <div class="nav"> 
    <ul id="nav"> 
    <li><a href="Pagina principala.html">Pagina principala</a></li> 
    <li><a href="Despre noi.html">Despre noi</a></li> 
    <li><a href="Clienţii noştri.html">Clientii nostri</a></li> 
    <li><a href="Produse.html">Produse</a></li> 
    <li><a href="Contacte.html">Contacte</a></li> 
    </ul> 
</div> 
</div> 
<div class="headerBreak"></div> 
</div> 
</body> 
</html>

источник

2015-04-23 Jack Morgan

большое спасибо всем! : 3 –

Вы не указали навигационную панель достаточной ширины. Изменение правила .nav:

.nav { 
    width:750px; <------- adjust this 
    margin:0 auto; 
    list-style:none; 
}

Я изменил вашу ширину 800px вместо 750px, и теперь меню помещается на одной строке и по центру.

Вот скрипка: https://jsfiddle.net/macg14fs/

источник

2015-04-23 21:36:06

С Fiddle было бы гораздо легче знать Whats проблемы, но попробуйте это:

#nav { 
 
    width: 100%; 
 
} 
 

 
#nav > li { 
 
    display: inline-block; 
 
    margin: 5px 5px 5px 5px; 
 
    text-align: center; 
 
}

источник

2015-04-23 21:40:04

Эта разметка фрагмента, которую вы используете, - как вы узнали об этом и где она задокументирована? –

Вы можете создавать фрагменты с помощью «Ctrl + M» при написании ответа здесь! –

Вашего .nav слишком узко для содержимое, которое оно завернуло. Нажмите F12 в своем браузере, чтобы открыть интерактивные инструменты для отладки. После этого инвестируйте некоторое время в изучение бутстрапа.

источник

2015-04-23 21:40:11

Невозможно выровнять навигационную панель под заголовком image

ответ

Смежные вопросы