时间戳

首页 > 解决方案 > 为什么将导航栏链接包装在容器中会破坏此布局？

javascript - 为什么将导航栏链接包装在容器中会破坏此布局？

问题描述

我的响应式导航栏有两个问题，我无法理解。如果我将“导航栏”类中的所有内容包装在一个容器中，并将最大宽度设置为 1170 像素，那么我的 flexbox 规则就会超出窗口并更改布局。我想这样做，以便我的徽标和链接使适当的边界与整个页面的边界保持一致，同时将黑色背景保持在页面的边缘。

这是我试图复制的导航栏的屏幕截图。在此处输入图像描述链接和徽标位于导航栏中的容器内。

我的第二个问题是，如果我将“导航栏”的最小高度设置为 12 vh（这样我的导航栏就可以使用我拥有的 logo.png。响应式下拉菜单不尊重这个最小高度。在移动少数徽标和链接未居中对齐，然后切换菜单不是从导航栏底部开始。我附上了屏幕截图。

第一个屏幕截图显示了桌面视图上 12vh 的最小高度，接下来的 2 个屏幕截图显示了移动视图上发生的情况

在此处输入图像描述

此屏幕截图显示徽标和汉堡菜单如何不在移动视图中居中 在此处输入图像描述

最后一个屏幕截图显示了响应式菜单如何不从导航栏的底部开始，导航栏的最小高度设置为 12vh 在此处输入图像描述

我该如何解决这些问题？

谢谢

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
}

.brand-title {
    font-size: 1.5rem;
    margin: .5rem;
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 1rem;
}

.navbar-links li:hover {
    background-color: #555;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }
}
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="background_styles.css">
      <link rel="stylesheet" href="styles.css">
      <script src="script.js" defer></script>
      <title>Responsive Navbar</title>
    </head>
    <body>
      <nav class="navbar">
        <div class="brand-title">Brand Name</div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </body>
</html>

标签： javascripthtmlcssflexbox

解决方案

推荐阅读