如何调整fixed导航栏大小并与内容容器对齐？

核心逻辑 #

fixed定位的元素脱离文档流，默认跟着浏览器视口定位。要和你的内容容器（wrapper）对齐，关键是让导航栏宽度和wrapper一致，再通过自动水平外边距实现居中。

直接修改CSS方案 #

假设你的内容容器.wrapper宽度为1200px（响应式场景可换用百分比），调整#menu的CSS如下：

#menu {
  /* 替换原width:100%，改为和wrapper匹配的宽度 */
  max-width: 1200px;
  width: 90%; /* 适配小屏幕的响应式宽度，可选 */
  margin: 80px auto 0; /* 将原右侧auto调整为水平方向auto，实现居中 */
  padding: 10px 0 0 0;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0; /* 添加left/right:0，配合margin:auto实现fixed元素水平居中 */
  list-style: none;
  background: #111;
  background: linear-gradient(#a9a9a996, #ffffff00);
  border-radius: 50px;
  box-shadow: 0 2px 1px #9c9c9c;
}

嵌套容器方案（改动更小） #

给导航栏套一个外层容器，让容器固定在顶部，导航栏在容器内居中：

<div class="menu-container">
  <ul id="menu">
    <li><a href="https://myblabla.com/">Home</a></li>
    <li> <a href="#">Bla1</a>
      <ul>
        <li><a href="#">Sub Bla1</a></li>
        <li><a href="#">Sub Bla2</a></li>
        <li><a href="#">Sub Bla3</a></li>
        <li><a href="#">Sub Bla4</a></li>
      </ul>
    </li>
    <li><a href="#">MyBlaBla</a></li>
    <li><a href="">About Bla</a></li>
    <li><a href="">My Bla Again</a></li>
  </ul>
</div>

.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
#menu {
  max-width: 1200px;
  width: 90%;
  margin: 80px auto 0;
  /* 保留原有其他样式不变 */
}

内容的提问来源于stack exchange，提问作者Eddie