css - 位置固定，不服从最大宽度容器父级-6ren

css - 位置固定，不服从最大宽度容器父级

转载作者：行者123 更新时间：2023-11-28 05:10:43

我正在尝试制作水平导航栏，现在我的 div 导航栏不使用 max-width: 1200px，它设置在 <body> 上所以我的无序列表不会 float 到屏幕右侧。添加 width: 100% 或 inherit 对导航没有帮助，宽度 100% 比我的最大宽度大得多。

body {
  margin: 0 auto;
  max-width: 1200px;
  font-family: Helvetica, Arial;
  background-color: #F7F7F7;
}
#wrapper {
  position: relative;
  z-index: 0;
  margin: 1% 4% 2%;
  padding: 1rem;
}
#navigation {
  position: fixed;
}
#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#navigation li {
  float: right;
}

<div id="wrapper">
  <div id="navigation">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Projects</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

最佳答案

我将您的最大宽度移动到您的#navigation 元素，并将其设置为 100% 宽度。此外，我将您的填充向下移动到您的 ul 元素。

这是更新的 fiddle .

#navigation {
  position: fixed;
  max-width:1200px;
  width:100%;
  border: 1px solid red;
}

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding: 1rem;
}

我想也许固定的位置让div忽略了父元素的最大宽度

关于css - 位置固定，不服从最大宽度容器父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39580707/