響應水平菜單

Question

我想創建菜單與固定最大寬度菜單中的項目寬度將響應。我創建了樣本，在那裏顯示我編碼的內容。

http://codepen.io/tanotify/pen/asjde

問題是，當我改變瀏覽器的一切大小不順心，我不知道如何解決它。導航中的詞彙可能會在未來發生變化，這也是問題所在。我試圖找到的解決方案也必須對這些詞作出響應。

Answer 1

你有沒有考慮過像http://codepen.io/panchroma/pen/DCshm中的第三個例子？

我已經刪除了一套寬度爲每個鏈接

#navigation li{ 
list-style: none; 
display: inline-block; 
/* width: 16%; */ 
} 

和使用環節

#navigation-padding li{ 
list-style: none; 
display: inline-block; 
/*padding: 0 4.5%; */ 
padding: 0 10px; 
} 

響應導航欄可以是一個真正的挑戰之間的像素填充基礎...試圖將一切進入有限的空間。

如果您需要對結果進行更多控制，您可能需要考慮使用@media查詢，您可以在不同的視口或窗口大小上指定不同的CSS樣式。

首先將<meta name="viewport" content="width=device-width, initial-scale=1.0"> 添加到文檔頭部。

然後在你現有的CSS結束時，你可以添加

@media (max-width: 767px) { 

#navigation li{ 
display: box; 
} 

} 

這將使導航欄倒塌在視口中767px及以下垂直列表。你可以改變這個像素寬度和內部的CSS選擇器到任何你想要的。

Here's a link讓您開始使用@media queries進行的操作。

祝你好運！