没有 Javascript 的响应式导航栏，仅使用 HTML 和 CSS
Posted
技术标签:
【中文标题】没有 Javascript 的响应式导航栏，仅使用 HTML 和 CSS【英文标题】：Responsive navigation bar without Javascript, using only HTML and CSS 【发布时间】：2021-12-30 06:18:26 【问题描述】：让我的导航栏响应时遇到了问题。我知道我需要使用媒体查询，但我是一个初学者，我真的不知道如何将它作为一个列表来实现。没有javascript可以做到这一点吗？现在代码看起来像这样，一个简单的列表：
<div id="nav">
<ul>
<li><a class="active" href="index.html"><b>HOME</b></a></li>
<li><a href="works.html">WORKS</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
【问题讨论】：
欢迎来到 SO，请提供您已经制作的 CSS 以及您想要做什么？ 【参考方案1】：如果您想更改不同视口的某些属性，您只需要媒体查询。查看下面的 sn-p 以获得简单的解决方案。
<html>
<head>
<style>
body
padding: 0;
margin: 0;
.navbar
display: flex;
background-color: #FF5C5C;
font-family: sans-serif;
ul
display: flex;
flex-direction: row;
list-style: none;
ul>li>a
padding: 0 12px;
color: white;
font-size: 12px;
@media screen and (max-width: 992px)
ul>li>a
font-size: 16px;
padding: 0 6px;
.navbar
background-color: #2689B9;
background: linear-gradient(to right, #40B6C0 40%, #2689B9 80%);
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href="index.html"><b>HOME</b></a></li>
<li><a href="works.html">WORKS</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
</body>
</html>【讨论】：
谢谢，这行得通。唯一的问题是导航栏被放置在中心，同时通过 Chrome 上的响应式设计模式查看。我怎样才能把它放在左边？ 嗯。我没有得到那个结果。它停靠在我的左侧。也许您的页面没有设置为移动视口。尝试在你的 标签中添加这个<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
我设法解决了它，不知何故有一个隐藏元素阻止了它。但是，谢谢您的回答，它挽救了我的一天！ :)以上是关于没有 Javascript 的响应式导航栏，仅使用 HTML 和 CSS的主要内容，如果未能解决你的问题，请参考以下文章