响应式水平菜单

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;
}

}  

这将使导航栏在 767 像素及以下的视口处折叠为垂直列表。您可以将此像素宽度和内部的 css 选择器更改为您想要的任何内容。

Here's a link 让您开始使用 @media 查询。

祝你好运！