導航不會留在頁眉

當我調整瀏覽器的大小時，導航進入灰色區域而不是停留在黑色。有人能幫我理解爲什麼這不起作用嗎？導航不會留在頁眉

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

導航不會留在頁眉

回答

相關問題