导航不会留在页眉

当我调整浏览器的大小时，导航进入灰色区域而不是停留在黑色。有人能帮我理解为什么这不起作用吗？导航不会留在页眉

HTML

<body> 
     <header> 
      <div class="wrapper"> 
       <h1>Business Logo</h1> 
       <nav class="nav"> 
        <ul> 
         <li><a href="">item 1</a></li> 
         <li><a href="">item 2</a></li> 
         <li><a href="">item 3</a></li> 
         <li><a href="">item 4</a></li> 
         <li><a href="">item 5</a></li> 
        </ul> 
       </nav> 
      </div><!-- END OF NAV WRAPPER --> 

     </header> 

     <div class="clearfix"></div> 


     <div class="wrapper"> 

      <div class="boxes"> 



      </div> 

      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 

     </div> <!-- END OF BOXES WRAPPER --> 
</body>

CSS

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 



/*********************************** 
    MAIN CONTENT 
************************************/ 

body { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 20px; 
    background-color: #c5c5c5; 
} 

.wrapper { 
    width: 70%; 
    margin: 0 auto; 
} 

.clearfix { 
    clear: both; 
} 

.button { 
    text-decoration: none; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: black; 
    background-color: yellow; 
    padding: 12px; 
    display: block; 
    text-align: center; 
    border-radius: 5px; 
    box-shadow: 0 2px 2px #999; 
    margin-top: 33px; 
} 

img { 
    width: 187px; 
    height: 187px; 
} 



/*********************************** 
    NAVIGATION 
************************************/ 


header { 
    height: 50px; 
    background-color: black; 
    color: white; 
    border-bottom: 4px solid yellow; 
} 

header h1 { 
    position: relative; 
    top: -8px; 
    display: inline-block; 
    color: yellow; 
    font-family: 'Merriweather', serif; 
    font-size: 1em; 
    padding: 10px 0; 
} 

.nav { 
    float: right; 
    position: relative; 
    margin-top: 13px; 
} 
/* 
.nav ul { 
    margin: 0px; 
}*/ 

.nav li { 
    display: inline; 
    list-style-type: none; 
    float: left; 
} 

.nav a:hover { 
    color: yellow; 
} 

.nav a { 
    /*display: block;*/ 
    /*line-height: 2em;*/ 
    /*padding: 10px 10px;*/ 
    padding-left: 10px; 
    padding-right: 10px; 
    color: white; 
    text-decoration: none; 
} 



.boxes { 
    /*position: relative;*/ 
    margin-top: 10px; 
    margin-right: 5px; 
    margin-left: 5px; 
    padding: 10px 10px; 
    display: inline-block; 
    background-color: #fff; 
    box-shadow: 0 2px 2px #999; 
    width: 187px; 
    height: 250px; 
} 





/*********************************** 
    FOOTER 
************************************/ 

footer { 
    overflow: hidden; 
    background-color: black; 
    color: white; 
    padding: 25px 0; 
}

来源

2014-09-23 J82

添加min-width: 500px;到您的包装类是这样的：

.wrapper { 
    width: 70%; 
    margin: 0 auto; 
    min-width: 500px; 
}

来源

2014-09-23 02:45:39

导航不会留在页眉

回答

相关问题