Здравствуйте, уже не на первом форуме создаю эту тему, но пока ответов не нашел.
Столкнулся с проблемой переноса на новую строку элементов в Chrome при масштабировании до 33% - 25%. Пол беды при масштабировании - на macbookах и 4к мониторах происходит то же самое. В Firefox, Edge все работает как надо. Пример тут: http://sinyanskiy.com/files/test/test.html (убрал весь контент чтобы не сочли за рекламу).
Подробнее.
Есть горизонтальное меню:
<header id="header-id">
<div class="layout-positioner">
<div class="logo">
logo here
</div>
<div class="phones-container">
<div class="phone"><span class="operator">Lorem</span>+XX (XXX) XXX XX 00</div>
<div class="phone"><span class="operator">Lorem</span>+XX (XXX) XXX XX 00</div>
<div class="phone"><span class="operator">Lorem</span>+XX (XXX) XXX XX 00</div>
<div class="maplink"><a href="#contacts-id">Карта проезда</a></div>
</div>
<nav class="menu" id="menu_id">
<ul>
<li class="menu-close-btn" id="menu-close-btn-id">Закрыть<img src="arrow_right.png" alt="Arrow right"></li>
<li class="active"><a href="#prices-id">Шенгенские визы</a></li>
<li><a href="#res-permit-id">ВНЖ в Прибалтике</a></li>
<li><a href="#study-work-id">Работа в Прибалтике</a></li>
<li><a href="#study-work-id">Учеба в Прибалтике</a></li>
</ul>
</nav>
</div>
<div class="menu-btn" id="menu-btn-id"></div>
</header>
При масштабировании до 33% пункты
<li><a href="#study-work-id">Учеба в Прибалтике</a></li>
<div class="maplink"><a href="#contacts-id">Карта проезда</a></div>
не влезают в контейнер и переносятся на новую строку (а в показанной выше ссылке когда я в телефонах заменил цифры на “Х” так и последний номер так же переносится).
Я перепробовал много чего (размеры шрифта, внутренних, внешних отступов, ширину контейнера - для лого 15% для всего остального 85% и т.д.) Самое для меня не понятное это когда в контейнере остается еще много места, но последний пункт все равно переносится! Например поставить размер шрифта 10px - в контейнер еще пол такого же меню влезет, но нет - все равно при масштабировании происходит то же самое.
Я нашел такие решения - или white-space: nowrap; или же увеличение контейнера layout-positioner c 1080 до 1300px, но ни первое ни второе, как мне кажется, не очень правильные. Да и есть четкое тз в котором ширина контейнера 1080px.
В общем кто сталкивался с подобным или видит в чем моя ошибка - прошу помощи.
Заранее спасибо!
Я смотрел поведение меню на разных топ сайтах ру- уанета и на многих происходит то же самое, но вопрос все равно остается с чем это связано и как с этим бороться.
css много поэтому поставил в конце
@import url([url]https://fonts.googleapis.com/css?family=Roboto:300,500,700,400&subset=latin,cyrillic);[/url]
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 110px;
box-sizing: border-box;
background-image: linear-gradient(to left, #10638e, #42a5d9);
transition: all 0.4s ease;
z-index: 2;
}
header .logo {
float: left;
width: 30%;
height: 100%;
text-align: center;
}
header .logo img{
height: 120%;
}
header .menu,
header .phones-container {
float: left;
width: 70%;
height: 50%;
color: #fff;
box-sizing: border-box;
}
header .phones-container {
padding-top: 10px;
border-bottom: 1px solid #42a5d9;
}
.phones-container .phone {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
text-align: center;
font-size: 1.1em;
font-weight: 500;
}
.phones-container .phone .operator {
display: block;
margin-bottom: 5px;
font-size: 0.9em;
font-weight: 300;
}
.phones-container .maplink {
display: inline-block;
vertical-align: middle;
font-family: 'Roboto', sans-serif;
}
.phones-container .maplink a {
color: #fff;
text-decoration: none;
border-bottom: 1px dashed #fff;
}
.phones-container .maplink a:hover {
color: #fff000;
border-bottom: 1px dashed #fff000;
}
.phones-container a {
color: inherit;
text-decoration: none;
}
header .menu {
padding-top: 9px;
transition: all 0.3s ease;
box-sizing: border-box;
}
header .menu ul{
width: 100%;
/* white-space: nowrap;*/
}
header .menu li {
display: inline-block;
vertical-align: middle;
height: 36px;
margin: 0;
padding: 0 10px;
font-size: 1.1em;
border-radius: 5px;
line-height: 2.1;
transition: background-color 0.4s ease;
}
header .menu li:last-child {
margin-right: 0px;
}
header .menu li.active,
header .menu li:hover {
color: #fff;
background-color: rgba(255, 255, 255, 0.5);
}
header .menu li a{
display: block;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
}
header .menu-btn {
display: none;
position: absolute;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
background: url("gamburger.png") no-repeat 0 0;
background-size: 60px 30px;
cursor: pointer;
z-index: 1;
}
header .menu-btn:hover {
background-position: -30px 0;
}
.menu .menu-close-btn {
display: none;
height: 40px;
background-color: #fff;
color: #000000;
font-size: 1em;
font-weight: 500;
line-height: 2;
}
.menu .menu-close-btn:hover {
background-color: #fff;
color: #3c3c3c;
cursor: pointer;
}
.menu .menu-close-btn img {
height: 25px;
vertical-align: middle;
margin-left: 15px;
}
.layout-positioner {
width: 1080px;
height: 100%;
margin: auto;
padding: 0;
}
.clearfix {
display: table;
clear: both;
}