我希望导航按钮显示在具有自动居中功能的移动视图中的徽标下方

Question

HTML 为桌面视图编写的代码

<body>
    <div class="main-container">
    <header>
        <div class="header-logo"></div>
            <nav class="nav clearfix">
                <ul> 
                <li><a class="active" href="#">LOGIN</a></li> 
                <li><a href="#">SIGN UP</a></li> 
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">HOME</a></li>
                </ul>
            </nav>
    </header>

CSS 为桌面视图编写的代码

 header{
        position: fixed;
        top:0px;
        width: 100%;
        height:80px;
        background-color:#0165ba;
        font-family: 'Arvo', serif;
        margin: 0 auto;
         display: block;
    }


    .header-logo

    {
     width:20%;
     background-image: url("/images/logo.png");
    background-repeat: no-repeat;
    height:80px; 
    float:left;
    }

    .nav{

     width:80%;
     height:80px;
     float:right;

    }
    .nav a{
        color: #fff; 
        text-decoration: none;
        display:inline-block;
        height: 50px;
        width:120px;
        text-align: center;
        line-height: 56px;
        margin-top: 15px;
        margin-left: 4px;
    }
    .nav ul{
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;

    }
    .nav li {
      float:right;
      font-family: 'Arvo', serif;
      font-size: 1.2em;
      line-height: 80px;
      margin-right: 20px;
    }

    .nav a.active {
      background-color: #fff;
      color: #0165ba;
      border-radius: 5px;
    }

    .nav a:hover{
      background-color: #fff;
      color:#0165ba; 
      border-radius: 5px;
    }
    .nav a.active:hover {
      background-color:#0165ba;
      color: #fff;
      border-radius: 5px;
    }

第一个是我写的header，我想让它像下图那样，我试过了，但做不成那样。

我目前使用下面的代码得到以下输出。

css我为movie view写的代码

header{
    position: fixed;
    top:0px;
    width: 100%;
    background-color:#0165ba;
    font-family: 'Arvo', serif;
    margin: 0 auto;

}

.header-logo

{
 width:30%;
 height: 53px;
 background-position: center;
 background-image: url("/images/logo-small.png");
 height:70px;
    float:left;
}

.nav{
 width:70%;
 background-color:#0165ba;
 float: right;

}
.nav a{
    color: #fff; 
    text-decoration: none;
    display: block;
    height: 20px;
    width:60px;
    text-align: center;
    line-height: 20px;
    margin-left: 4px;
}
.nav ul,li{
    list-style: none;
    text-align: center;   

}
.nav li,ul {
  font-family: 'Arvo', serif;
  font-size: 0.7em;
  line-height: 50px;
  margin: 0 auto;

}

.nav a.active {
  background-color: #fff;
  color: #0165ba;
  border-radius: 5px;
}

.nav a:hover{
  background-color: #fff;
  color:#0165ba; 
  border-radius: 5px;
}
.nav a.active:hover {
  background-color:#0165ba;
  color: #fff;
  border-radius: 5px;
}

Answer 1

在移动设备 CSS 上删除 .header-logo 和 .nav 的浮动，然后将 margin:0 auto; 添加到您想要对齐的任何位置。

我也做了一些更改，查看整个 CSS 代码以及下面的在线示例：
http://jsfiddle.net/tv5k14yr/

header{
    position: fixed;
    top:0px;
    width: 100%;
    background-color:#0165ba;
    font-family: 'Arvo', serif;
    margin: 0 auto;    
}
.header-logo{
    width: 30%;
    margin: 0 auto;
    background-position: center;
    background-image: url(http://listography.com/action/list-image?uid=9739888104&lid=6819615378);
    height: 70px;
}
.nav{
    background-color: #0165ba;
    margin: 0 auto;
    width: 70%;        
}
.nav a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    height: 20px;
    width: 60px;
    text-align: center;
    line-height: 20px;
    margin-left: 4px;
}
.nav ul,li{
    list-style: none;
    text-align: center;
    padding: 0;

}
.nav li,ul {
    font-family: 'Arvo', serif;
    font-size: 0.7em;
    margin: 0 auto;
    margin: 0 auto;

}
.nav a.active {
    background-color: #fff;
    color: #0165ba;
    border-radius: 5px;
}
.nav a:hover{
    background-color: #fff;
    color:#0165ba; 
    border-radius: 5px;
}
.nav a.active:hover {
    background-color:#0165ba;
    color: #fff;
    border-radius: 5px;
}

我希望导航按钮显示在具有自动居中功能的移动视图中的徽标下方

i want the nav buttons to appear below the logo in the mobile view with auto centering

html

css

media-queries