html - 响应式水平菜单

Question

我正在尝试创建具有修复最大宽度的菜单，其中菜单中的项目宽度将响应。我创建了示例，其中显示了我编码的内容。

问题是当我更改浏览器的大小时，一切都出错了，我不知道如何解决它。导航中的文字将来可能会改变，这也是问题所在。我试图找到的解决方案也必须对单词做出响应。

score 1 · Accepted Answer

您是否考虑过类似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 选择器更改为您想要的任何内容。

这是一个链接，可帮助您开始使用 @media 查询。

祝你好运！

1 回答 1