Question

我正在尝试制作水平导航栏，现在我的div导航栏没有使用max {width：1200px，这是在<body>上设置的，所以我的无序列表没有浮动到屏幕右侧。添加宽度：100％或继承到导航没有帮助，宽度100％超过我的最大宽度。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我将最大宽度移动到#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忽略父元素max-width

固定位置不遵守max-width容器父级

1 个答案: