當瀏覽器窗口重新調整大小時，導航欄按鈕堆疊在彼此的頂部

當瀏覽器窗口重新調整大小時，此導航欄會重新排列，所有按鈕都從一條水平直線延伸到堆疊在頂部因爲窗戶變得越來越小，所以一個接一個。如何設置它們以保持原位，並很好地粘貼到頁眉徽標的底部，無論窗口大小如何？當瀏覽器窗口重新調整大小時，導航欄按鈕堆疊在彼此的頂部

截圖的問題： http://s29.postimg.org/3tnroxls7/Screenshot1.png

的目標截圖： http://s24.postimg.org/vzuruvqb9/Screenshot2.png

body { 
 
    background-color: #FFFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 

 
header img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    border: 5px solid #0009bc; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a:link, a:visited { 
 
    display: block; 
 
    width: 139px; 
 
    font-weight: bold; 
 
    color: #20dbd4; 
 
    background-color: #000000; 
 
    text-align: center; 
 
    padding: 12px; 
 
    text-decoration: underline; 
 
    text-transform: uppercase; 
 
} 
 

 
a:hover, a:active { 
 
    background-color: #20dbd4; 
 
    color: #000000; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> 
 
<meta name="robots" content="noindex, nofollow, noarchive"/> 
 
<title>Grid Design</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">home</a></li> 
 
     <li><a href="#news">news</a></li> 
 
     <li><a href="#about">about</a></li> 
 
     <li><a href="#products">products</a></li> 
 
     <li><a href="#photos">photos</a></li> 
 
     <li><a href="#contact">contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

來源

2014-10-17 NightSpark

如果我說得對，您只是希望菜單保持相同的大小並保持一致，對不對？所以，你可以寬度只是添加到您的<ul>

ul { 
    list-style-type: none; 
    width: 978px; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: inline-block; 
    border: 5px solid #0009bc; 
}

見fiddle這裏。

來源

2014-10-17 08:35:36 janatuerlich

非常好，謝謝。 – NightSpark 2014-10-17 08:45:40

當你談論大小調整和respsonsivness你應該已經在百分比想着寬度。例如，你有6個li-s，你試圖把它放在100％的寬度上......這意味着每個li應該有16.66％的寬度。從理論上講，這應該很好地工作和包裝，但由於空白，你的問題將持續存在。爲了解決這個問題，你需要打空白。請參考此處：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2014-10-17 08:31:54 Gho

nav{ 

width: 1000px; 
margin: 0 auto; 
}

來源

2014-10-17 08:58:48 Narayana

當瀏覽器窗口重新調整大小時，導航欄按鈕堆疊在彼此的頂部

回答

相關問題