html - 导航栏在大型媒体而非手机上向后

Question

我试图制作一个响应式导航菜单( Logo 左侧和导航右侧，有一次它在大型媒体类型上工作正常但在移动媒体上失败(导航从后到前的顺序)我尝试对齐UL 向右浮动，Li 向左浮动，但没有喜悦，我确定我只是在看一些简单的东西。

HTML

    <div id="Header"><!--Start of Header-->

        <div><img id="Logo"src="images/logo.png"></div>


        <nav><!--start of nav tag-->
            <span class="nav-btn"></span>
                <ul class="nav">

                    <li><a href="#Home">Home</a></li>

                    <li><a href="#About Us">About Us</a>
                        <ul>
                            <li><a href="#Beliefs" >Beliefs</a></li>
                            <li><a href="#Pastors">Pastors</a></li>
                        </ul>
                    </li>

                    <li><a href="#Services">Services</a></li>

                    <li><a href="#">Ministries</a>
                        <ul>
                            <li><a href="#Evangelism">Evangelism</a></li>
                            <li><a href="#LifeGroups">LifeGroups</a></li>
                            <li><a href="#Prayer">Prayer</a></li>
                            <li><a href="#Youth">Youth</a></li>
                            <li><a href="#Childrens">Childrens</a></li>
                            <li><a href="#Extra">Extra</a></li>

                        </ul>
                    </li>

                    <li><a href="#Media">Media</a>
                        <ul>
                            <li><a href="sermons.html">Sermons</a></li>
                            <li><a href="#Gallery">Gallery</a></li>
                            <li><a href="#Newsletter">Newsletter</a></li>
                            <li><a href="#Videos">Videos</a></li>
                        </ul>

                    </li>

                    <li><a href="#Contact Us">Contact Us</a></li>


                </ul><!--End of nav class ul tag-->
        </nav><!--End of nav tag-->

    </div><!--End of Header-->

CSS

/*Start of Navigation Bar*/
 /*Navigation ul*/
.nav {
     width:100%;
     background:black;
     line-height:100px;
     position:fixed;
     border-bottom: 1px red solid;
}

 /*Navigation li*/
nav .nav li{
    list-style-type: none;
    float: left;
    position:relative;  
}

/*Dropdown Clear funtion*/
#NavBar ul:after{content:"";display:block;clear:both}


 /*Navigation a*/
    nav .nav li a{
    color:white;
    text-decoration: none;
    padding:20px;
}

 /*Navigation a HOVER*/
    nav .nav li a:hover{
    color:yellow;
    text-decoration: none;
    padding:px;
    background:blue;
    transition:all 0.8s;
}


/*Navigation li HOVER*/
    nav .nav li:hover{
    width:auto;
    background:black;
    transition:all 0s;
}

                                            /*Mobile Menu HIDDEN submenu*/
/*hide submenu*/
    nav .nav li ul {
    width:auto;
    display: none;
    border-right:2px red solid;
    border-left:2px red solid;
}

/*Mobile menu button Display:NONE*/
.nav-btn{display:none;}

/*Show submenu at hover*/
    nav .nav li:hover ul {
    width:auto;
    display:block;
    position:absolute;
    top:100px;
    background-color:black;
    border-bottom:2px red solid;
}

/*Make submenu vertical*/
  nav .nav li ul li{
  width:100%;
  display: block;
  float:none;
  line-height:60px;
  position: relative; 
  z-index: 10; 
}

 /*Navigation sub li*/
    nav .nav li ul li:hover{
    width:auto;
    color:red;
    text-decoration: none;
    background:blue;
}

 /*Navigation a*/
    nav .nav li ul li a:hover{
    width:auto;
    color:yellow;
    text-decoration: none;
    background-color:blue;

}

/*MOBILE PHONE*/
@media (max-width: 660px){


/*Navigation a HOVER 1st level - MOBILE PHONE*/
nav .nav li a:hover{
    color:yellow;
    background:black;
    transition:all 0.0s;
}

 /*Navigation a HOVER sub menu - MOBILE PHONE*/
nav .nav li ul li a:hover{
    width:auto;
    color:yellow;
    text-decoration: none;
    background-color:transparent;
}

/*Navigation ul size of ul main menu MOBILE PHONE*/
.nav {
     width:60%;
     height:auto;
     background:black;
     line-height:50px;
     position:fixed;
     border-radius:0 0 20px 0;
}

 /*Navigation li size of li in - MOBILE PHONE*/
nav .nav li{
    width:100%;
    display:block;
    float: none;
    background-color:navy;
    border-bottom:1px red solid;
}



 /*Navigation li size of li in - MOBILE PHONE*/
    nav .nav li:last-child{
    border-radius:0 0 20px 0;
    border-bottom:1px yellow solid;
}

/*sub menu background color - MOBILE PHONE*/
nav .nav li ul li{
    width:100%;
    height:100%;
    left:30px;
    line-height:30px;
    background-color:orange;
}

/*2nd level UL - MOBILE PHONE*/
nav .nav li ul{
     border-right:0px red solid;
     border-left:0px red solid;
}

/*2nd level UL HOVER - MOBILE PHONE*/
    nav .nav li:hover ul {
    width:50%;
    padding:0px;
    margin:0px;
    left:75px;
    top:10px;
    background-color:transparent;
}

/*1st level UL- MOBILE PHONE*/
.nav{
    text-align:left;
    display:none;   
    }

/*1st level LI- MOBILE PHONE*/
.nav > li{
    display:block;
}

/*Menu BUTTON settings- MOBILE PHONE*/  
.nav-btn{
    width:100%;
    height:70px;
    display:block;
    background-color:navy;
    color:#FFF;
    font-size:30px;
    padding-left:10px;
    padding-top:10px;
    text-align:left;
    cursor:pointer; 
}

/*Menu BUTTON- MOBILE PHONE*/
.nav-btn:before{
    content: "Menu";
}
     }

Answer 1

你可以这样做:

nav .nav {
    float: left;
}

nav .nav li {
    display:inline-block;
}

那会使 .nav div 向左浮动，并且 LI 将彼此相邻