Question

我想这很容易，但是我已经在这里呆了3个小时了。使用时，我的下拉菜单会移动全部内容。我在StackOverflow上搜索了类似的问题，搜索了与下拉菜单相关的问题，并得到了以下答案，部分有帮助：

.menu > ol {  
  position:absolute;
  z-index:100;  
}

我已将上面的代码段添加到原始代码中。它以某种方式产生了效果-它不会移动其他内容，但是现在我无法水平居中。
使用margin:0 auto;也无济于事。你能帮我吗？我将position + zindex放在错误的位置，或者我丢失了一些东西。 Codepen： https://codepen.io/graphconcept/pen/MdwQBM

Answer 1

从position: absolute中删除.menu > ol并将其添加到.menu。还将width: 100%添加到.menu。如果希望无论滚动如何菜单都可见，请改成fixed的位置并添加top: 0。

.menu {
  margin: 15px;
  position: fixed;
  width: 100%;
  top: 0;
}
.menu > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index:100;  
}

说明：

带有position: static（位置的默认值）的块元素的默认宽度为100％；将位置设置为absolute或fixed会将其宽度更改为auto；即它们会缩小以适合其内容的宽度。您的菜单列表在菜单元素内水平居中。这意味着，当菜单元素为页面宽度的100％时，将菜单列表水平居中也将使其相对于页面居中。但是，当菜单元素缩小以适合其宽度时，菜单列表的居中位置将无法超过其已居中的位置。菜单元素的宽度需要显式设置为100％，以使居中具有可见效果。

下拉菜单要么移动内容，要么不让我居中

1 个答案: