javascript - 当屏幕尺寸大于折叠断点时，如何使导航栏下拉列表水平显示，居中对齐？

Question

所有有问题的代码都可以在 https://codepen.io/taniarascia/pen/dYvvYv 找到

这是没有 Bootstrap 的响应式导航栏。

我想操纵当屏幕尺寸大于断点时下拉菜单的显示方式。我希望它水平显示并居中对齐。我知道使用 @media 来检测屏幕尺寸，但是什么 css 可以用来水平居中显示它？

<ul class="nav-dropdown">
        <li>
          <a href="#!">Web Design</a>
        </li>
        <li>
          <a href="#!">Web Development</a>
        </li>
        <li>
          <a href="#!">Graphic Design</a>
        </li>
      </ul>

我认为要编辑的css是

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

但我不知道如何针对我想要的 View 对其进行编辑。

我正在添加图片。我想要水平下拉菜单，而不是垂直堆栈。

Answer 1

转到 CSS 的第 45 行并注释掉一部分:

 //position: relative;

显然，设置 li 元素的位置会极大地改变它们的行为方式。不知道那个。至于将它们放在父 li 节点的中心，这需要相当多的 JS 才能使其工作，因为您必须计算元素的数量并对子 ul 应用负左边距 节点。这样做之前请三思，因为它会急剧增加解决方案的复杂性。

演示:https://codepen.io/anon/pen/pWaOYP