使用位置：固定显示：可弯曲

Question

我给了我的导航栏

display: flex;

的属性，我也希望修复导航栏。为什么

position: fixed;

不起作用，但

position: sticky;

却能起到同样的作用？

当我添加

position: fixed;

的属性后，我的导航栏就被挤压了。

Answer 1

您可以将

width: 100%

添加到您的元素

body,
html {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  padding: 5px 10px;
}

ul {
  padding: 0;
  display: flex;
  background-color: skyblue;
  position: fixed;
  justify-content: space-around;
  box-sizing: border-box;
  
  
  width: 100%; /* try changing this line */
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>