Question

我正在做一个自适应网站，并在标题中使用UL设置显示导航：内联。在PC中，左侧会有一个徽标，右侧会有导航。随着屏幕尺寸的减小，导航将在徽标下方滑动，两者都在768到400宽的中心，在右下方400.

UL位于容器div中，问题是当我在460到420范围内调整浏览器的大小时（确切的值似乎随浏览器而变化）我的导航UL分为2行，即使有空间留在容器div内的一行。

感谢。

Codepen

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>&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;}
}

Answer 1

只需从display: inline

中删除.shopping_nav ul即可

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

Answer 2

您必须为移动视图设置“text-align：center”。目前它正在使用“text-align：right”

此处代码：http://codeamaze.com/code-beautifier/html-beautifier/ZI3qBj7YS6A=

输出：将代码粘贴到此处：http://codeamaze.com/web-viewer/html-viewer

响应式CSS - 显示：内联UL分为2行，似乎有足够的空间

2 个答案: