时间戳

首页 > 解决方案 > 下拉菜单要么移动内容，要么不让我居中

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

问题描述

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

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

我已将上面的代码段添加到原始代码中。它以某种方式解决了 - 它不会移动其他内容，但现在我无法将它水平居中。
使用margin:0 auto;也没有帮助。你能帮帮我吗？我要么将 position + zindex 放在了错误的位置，要么我遗漏了一些东西。代码笔： https ://codepen.io/graphconcept/pen/MdwQBM

标签： htmlcss

解决方案

删除position: absolutefrom.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%，以使居中具有可见的效果。

推荐阅读