响应水平菜单

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进行的操作。

祝你好运！