Блог

Я делаю адаптивный сайт и имею навигацию в заголовке, используя UL, установленный для отображения: встроенный. На ПК слева будет логотип, а справа — навигация. По мере уменьшения размера экрана навигация будет перемещаться под логотипом, оба по центру шириной от 768 до 400 и справа ниже 400.

UL находится внутри контейнера div, и проблема в том, что при изменении размера моего браузера в диапазоне 460-420 (точные значения, похоже, меняются в зависимости от браузера) мой навигационный UL разбивается на 2 строки, хотя для него есть место, чтобы оставаться на 1 строке в пределах его контейнера div.

Спасибо.

Codepen

http://codepen.io/anon/pen/LRqbAO

HTML

    <header>
            <div class="hamburger">
                <a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
            </div>
            <div class="logo">
                <img src='design/testlogo.png' style='width:100%;max-width:338px;'>
            </div>


            <div class="shopping_nav">
                <ul>
                    <li class='fasize'><i class="fa fa-location-arrow"></i></li>
                    <li>Ireland<br>(Change)</li>
                    <li class='pipe_char'>|</li>
                    <li class='fasize'><i class="fa fa-globe"></i></li>
                    <li>Shipped<br>Globally</li>
                    <li class='pipe_char'>|</li>
                    <li class='fasize'><i class="fa fa-shopping-basket"></i></li>
                    <li>2 items<br>amp;euro;21.45</li>
                    <li class='pipe_char'>|</li>
                    <li class='fasize'><i class="fa fa-search"></i></li>
                </ul>
            </div>


    </header>
  

CSS

 @import url(https://fonts.googleapis.com/css?family=Lato:400,100,300italic,300,100italic,400italic,700,700italic,900,900italic);
* {
  margin: 0;
  padding: 0;
  -webkit-padding-start: 0;
}

body {
  color: #444444;
  font-size: 16px;
  font-family: Lato;
  margin:0px;
}

@media (max-width: 768px) {
    header{ background-color:black; height:150px; }
}

@media (min-width: 769px) {
    header{ background-color:black; height:134px; }
}



.hamburger  {padding:5px 8px;float:left;border:1px dashed white;}
.hamburger i {color:white;font-size: 40px;}



.logo {padding:5px;float:left;border:1px dashed white;}


.shopping_nav {
  float:right;
  padding:5px;
  color:white;
  border:1px dashed red;
  text-align:right;
}


.shopping_nav ul, .shopping_nav li {
    display:inline;
    font-size: 14px;
    padding: 4px;
    margin: 0px;
}



.shopping_nav ul {
  border:1px solid green;
}



.shopping_nav .pipe_char {color:white;font-size: 26px;}
.shopping_nav .fasize {color:white;font-size: 24px;}


@media (max-width: 420px) {
  .shopping_nav ul, .shopping_nav li {
      display:inline;
      font-size: 13px;
      padding: 2px;
  }
  .shopping_nav .fasize {color:white;font-size: 20px;}
}

.shopping_nav li {display:inline-block;text-align:left;}




@media (max-width: 768px) {
.logo {max-width:338px;margin: 0 auto;float: none;}
.shopping_nav {max-width:380px;margin: 0 auto;float: none;}
}



@media (max-width: 400px) {
.logo {max-width:338px;float: right;}
.shopping_nav {padding:5px;max-width:380px;float: right;}
}



@media (max-width: 460px) {
  .logo {width:250px;}
}


@media (min-width: 769px) {
  .hamburger  {display:none;}
}
  

Просто удалите display: inline из .shopping_nav ul

http://codepen.io/anon/pen/WGPRQQ

Вы должны установить «выравнивание текста по центру» для просмотра с мобильных устройств. В настоящее время используется «выравнивание текста: по правому краю»

Код здесь:http://codeamaze.com/code-beautifier/html-beautifier/ZI3qBj7YS6A =

Вывод: Вставьте код сюда: http://codeamaze.com/web-viewer/html-viewer