html - 在 Chrome 中调整视口(viewport)大小时， float 列表低于容器

Question

我正在尝试使用响应式设计和媒体查询来创建适合不同视口(viewport)大小的容器。我的导航栏由一个 Logo div 和一个带有容器的 float 列表组成。

我遇到的问题是当视口(viewport)小于 640px 并且您将其调整为大于 640px 时， float 列表消失了 - 虽然刷新修复了这个问题。我仍在努力了解媒体查询以及如何在我的网站上使用它们...任何建议将不胜感激!

JSFiddle

HTML

<div class="navigation">
    <div class="container">
        <div class="logo">
            <img src="http://www.placehold.it/100x54"/>
        </div>
        <ul>
            <li><a>Services</a></li>
            <li><a>Work</a></li>
            <li><a>Contact</a></li>
        </ul><!--
    --></div>
</div>
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
}

.container {
    margin: 0 auto;
    min-width: 290px; 
    max-width: 960px;  
    padding: 15px;
}

.navigation {
    width: 100%;
    background: #323232;
}

.navigation .container {
    padding: 15px;   
    position: relative;
}

.navigation .logo {
    height: 54px;
    display: inline-block;
}

.navigation ul {
    float: right;
    text-align: right;
    font-size: 16px;
    padding: 17px 0;
    list-style-type: none;
    top: 0;
    margin: 0;
}   

.navigation li {
    margin-right: 15px;
    display: inline-block;
    color: #ffffff;
}

.navigation li:last-child {
    margin: 0;   
}

@media screen and (min-width: 400px) { /* Larger than 320px width less than 640px */
    .container { 
        width: 400px; 
    } 
}  

@media screen and (max-width: 640px) { /* Less than 640px */
    .navigation .logo {
        display: block; 
        text-align: center;
    }

    .navigation .container {
        padding: 3px 0;                                  
    }

    .navigation ul {
        display: block;
        width: 100%;
        float: none;
    }


    .navigation li {
        display: block; 
        margin: 0;
        text-align: center;
        padding: 5px 0;
        background: #000000
    }
}

@media screen and (min-width: 640px) { /* Larger than 640px width less than 960px */
    .container { 
        width: 570px; 
    } 
}  

@media screen and (min-width: 960px) { /* Larger than 960px width */
    .container { 
        width: 960px; 
    }                
}

Answer 1

它之所以这样是因为你的 div.logo在你 float ul 之前出现所以试着把 <div class="logo">在 ul 之后.

但是，当您调整浏览器大小时，在较小的屏幕上， Logo 将位于菜单下方，因此您可以尝试使用 position:absolute在 ul并删除 float:right从中，像这样:

.navigation ul {
   display: inline-block;
   position: absolute;
   right: 0;
   top: 15px;
}

@media screen and (max-width: 640px) {
  .navigation ul {
    width: 100%;
    position: relative;
    top: 0;
  }
}