导航菜单大小不正确
Posted
技术标签:
【中文标题】导航菜单大小不正确【英文标题】:Nav menu doesn't size properly 【发布时间】:2022-01-23 13:30:08 【问题描述】:我目前在使用此导航栏时遇到了一些问题。电脑版的效果很好,虽然移动版的菜单宽度似乎有点太大,导致导航中的所有项目都无法正确居中。
在上图中,可以看到移动端视图。我们可以通过查看底部的边框半径来确定菜单未居中。我还在第一个导航项的两侧添加了相同尺寸的点。
如果您想自己尝试,这里是jsfiddle:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu()
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu()
hamburger.classList.remove("active");
navMenu.classList.remove("active");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
.navbar
margin: 0;
padding: 0;
box-sizing: border-box;
.navbar html
font-size: 62.5%;
font-family: 'Roboto', sans-serif;
.navbar li
list-style: none;
.navbar a
text-decoration: none;
.navbar
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background-color: #353535;
.hamburger
display: none;
.bar
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
.nav-menu
display: flex;
justify-content: space-between;
align-items: center;
.nav-item
margin-left: 3rem;
.nav-link
font-size: 1.6rem;
font-weight: 400;
color: #7ef284;
.nav-link:hover
color: #6dd573;
.nav-logo
font-size: 2.1rem;
font-weight: 500;
color: #7ef284;
@media only screen and (max-width: 768px)
.nav-menu
position: fixed;
left: -200%;
top: 3rem;
flex-direction: column;
background-color: #353535;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
border-radius: 0 0 15px 15px;
.nav-menu.active
left: 0;
.nav-item
margin: 2.5rem 0;
.hamburger
display: block;
cursor: pointer;
.hamburger.active .bar:nth-child(2)
opacity: 0;
.hamburger.active .bar:nth-child(1)
transform: translateY(8px) rotate(45deg);
.hamburger.active .bar:nth-child(3)
transform: translateY(-8px) rotate(-45deg);
<header class="header">
<nav class="navbar">
<a href="/" class="nav-logo">Demo</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="/" class="nav-link">Home page</a>
</li>
<li class="nav-item">
<a href="/ilmoitus" class="nav-link">Info</a>
</li>
<li class="nav-item">
<a href="/" class="nav-link">Privacy Policy</a>
</li>
<li class="nav-item">
<a href="/yhteys" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
【问题讨论】:
欢迎来到 Stack Overflow!访问help center,使用tour 了解内容和How to Ask。如果您遇到困难,请发布您的尝试的minimal reproducible example,并使用[<>]
sn-p 编辑器 HERE 而不是 jsfiddle 记录输入和预期输出
您忽略了删除浏览器样式表添加到ul
元素的默认padding-left
。
对不起,我不太明白。全局 css 是否覆盖
meiert.com/en/blog/user-agent-style-sheets
【参考方案1】:
感谢 @CBroe,我通过将 padding-left
设置为 0 使其正常工作。
【讨论】:
以上是关于导航菜单大小不正确的主要内容,如果未能解决你的问题,请参考以下文章