响应水平菜单

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查询执行的操作。

祝你好运！