Правлю вот такой сайт http://nostrum.com.ua
Что бы не плодить много текста я скинул ссылку сайта.
Должно быть header {width: 100%;}
но не работает как нужно...
4 ответа
.header ul.menu
убрать width: 1100px;
, добавить text-align: center;
.header ul.menu li
убрать float: left;
, добавить display: inline-block;
чтобы все элементы влезали в строку меню поиграйте с padding: 0 28px;
. По-моему 18 или даже 12px лушче смотрится
-
Заработало! Спасибо! Я что то подобное пробовал, но не получалось. 5 янв 2016 в 13:54
для .header нужно указать min-width и max-width:1980px например но что то мне подсказывает что эту всю беду требуется переверстать)
header {
width: 100%;
height: 150px;
background-color: rgba(247, 247, 247, 0.5);
}
a.logo {
display: block;
}
a.logo img {
display: block;
margin: 0 auto;
width: 300px;
height: 100px;
}
.menu {
width: 100%;
height: 50px;
}
.menu ul {
position: relative;
display: block;
margin: 0 auto;
max-width: 900px;
padding: 0;
}
.menu ul li {
display: inline-block;
text-align: center;
padding: 0 30px;
}
<header>
<a href="#" class="logo">
<img src="http://nostrum.com.ua/wp-content/themes/naturefox/images/logo.svg">
</a>
<div class="menu">
<ul>
<li><a href="#">item 1</a>
</li>
<li><a href="#">item 2</a>
</li>
<li><a href="#">item 3</a>
</li>
<li><a href="#">item 4</a>
</li>
<li><a href="#">item 5</a>
</li>
</ul>
</div>
</header>
-
Спасибо, получается что li спрыгивают на новую строку, мне такое не подходит. Человек выше мне подсказал, и все заработало. 5 янв 2016 в 14:00
-
убрать float и переделать все на flexbox. и text-align: center//justify-content:center
.header p.logo a
очень мешаетfloat: left;
.