修复了大型显示器上导航栏延伸过远的问题

Question

我创建了一个带有固定水平导航栏的网站，该导航栏位于屏幕右侧，徽标位于左侧。一切正常，直到显示器宽度超过 1240 像素。此时，与其余内容（最大宽度为 1024 像素）相比，导航栏向右延伸得太远。

现在，我确切地知道它为什么这样做，我已经使用 对其进行了编码right: 0，但是我仍然不希望它超出我已将其余内容设置为的 1024px，而且我不知道如何解决这个问题。我尝试过设置 a max-width，div-element但它什么也没做，我尝试过使用max-width: 1024pxand创建其他元素position: relative（正如我建议的这个选项），但没有运气。

我能找到的解决这个问题的唯一方法是对每个分辨率进行媒体查询并使用边距来代替，right: 0尽管这似乎是一个不必要的漫长而复杂的解决方案。无论如何，我也不是开发人员，这是我第一次编码，所以我的知识非常有限。

main,
header {
    max-width: 1024px;
    margin: auto;
}

@media screen and (min-width: 780px) {
    .navbar {
        background-color: #ffffffde;
        position: fixed;
        padding: 3px;
        max-width: 1024px;
        z-index: 50;
        right: 0;
        margin-right: 2rem;
    }
    .navbar a {
        float: left;
        display: block;
        color: #000000;
        text-align: center;
        padding: 8px;
        text-decoration: none;
        font-size: 17px;
        top: 15px;
    }
    .navbar .icon {
        display: none;
    }
}

.dropdown {
    float: left;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: black;
    padding: 8px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9d3;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: rgba(224, 222, 222, 0.705);
}

.dropdown-content a:hover {
    background-color: rgba(224, 222, 222, 0.705);
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<header>
   <a href="/en/index.html">
      <div class="logo">Logo</div>
   </a>

   <div class="navbar" id="myNavbar">

      <a href="#about">About</a>

      <div class="dropdown">
         <button class="dropbtn">Services 
            <i class="fa fa-caret-down"></i>
         </button>
         <div class="dropdown-content">
            <a href="#services and solutions">Services and Solutions</a>
            <a href="#training">Training and Workshops</a>
         </div>
      </div>

      <a href="#partners">Partners</a>
      <a href="#contact">Contact</a>

      <a href="/sv/index.html" style="color: rgb(138, 138, 138)">Svenska</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
      </a>

   </div>
</header>

---

（我已经排除了CSS平板电脑和移动设备，因为这些工作，以及JS，因为这与问题无关，并且不希望它在帖子中占用不必要的空间）

如果有人对我的问题有任何可能的解决方案，我会尝试大多数事情，因为我已经到处搜索我的问题的答案。

Answer 1

固定位置元素已从正常 DOM 流中删除。因此固定位置元素总是相对于视口 and ignore everything else on the page.

但是，由于您知道<main>内容宽度为 1024px，因此您可以使用calc()调整right position of the fixed navbar...

主要内容左侧/右侧空白的宽度为：100%（页面宽度）减去 1024px（主要内容宽度）分成两半（左侧和右侧）。因此，这将为您提供主要内容的右边缘。

right: calc((100% - 1024px)/2);

   .navbar {
        background-color: #ffffff;
        position: fixed;
        padding: 3px;
        max-width: 1024px;
        z-index: 50;
        right: calc((100% - 1024px)/2);
        margin-right: 2rem;
   }

代码层