Javascript CSS移动导航下拉列表-对齐

我在codepen.io上找到了这个响应导航。它在codepen.io上运行得很好，但在JS Fiddle（包含在下面）中没有这么多。当屏幕拖过3行时，下拉图标链接变得不稳定，它与导航的其余部分不正确对齐。此外，无论何时使用下拉列表，选项no都不会相互对齐（桌面或移动）。下面是相关的CSS下拉列表-非常感谢您的帮助。我把它放在小提琴里

---

这是SCS的一个问题。我只是从你的代码笔中复制并粘贴了它，现在它在这个我从你的原件中分叉的地方工作得很好。我在

nav container

类中添加了一个负边距，以使用切换按钮纠正对齐问题。此外，您可以使用flexbox获得菜单项的中心位置

// Container with no padding for navbar
.nav-container {
  margin: auto;
  margin-top: -8px;
  display: flex;
  justify-content: center;

}

---

这是SCS的一个问题。我只是从你的代码笔中复制并粘贴了它，现在它在这个我从你的原件中分叉的地方工作得很好。我在

nav container

类中添加了一个负边距，以使用切换按钮纠正对齐问题。此外，您可以使用flexbox获得菜单项的中心位置

// Container with no padding for navbar
.nav-container {
  margin: auto;
  margin-top: -8px;
  display: flex;
  justify-content: center;

}

请参阅：

您只需将位置用作

相对

而不是

绝对

，并且在响应屏幕中，您必须将

填充设置为0

.navmobile {
  position: relative;
  float:right;
}

@media only screen and (max-width: 800px) {
  nav { 
    padding:0px;
  }
}

你的第二个问题是什么？这有点不清楚
 请参见：

您只需将位置用作
相对
而不是
绝对
，并且在响应屏幕中，您必须将
填充设置为0

.navmobile {
  position: relative;
  float:right;
}

@media only screen and (max-width: 800px) {
  nav { 
    padding:0px;
  }
}

你的第二个问题是什么？这有点不清楚
 刚刚修复了JS小提琴链接。。。。原来的代码笔是什么？刚刚修复了JS小提琴链接。。。。原版密码笔是什么？完美的一件事。第二件事是当你点击任何下拉链接。在OnTop上，链接彼此相邻。这适用于移动设备和桌面视图。如果你点击“服务”，你会看到这个问题。jsfiddle.net/z8rxe922/6这个JS提琴以文本为中心，移动按钮固定。唯一的问题是下拉列表中的链接完美的一件事。第二件事是当你点击任何下拉链接。在OnTop上，链接彼此相邻。这适用于移动设备和桌面视图。如果你点击“服务”，你会看到这个问题。jsfiddle.net/z8rxe922/6这个JS提琴以文本为中心，移动按钮是固定的。唯一的问题是下拉列表中的链接完美无瑕，但是我相信我所做的一些编辑会带来这些问题。我想让文本居中这个JS提琴把文本居中，按钮固定了唯一的东西是下拉菜单中的链接啊，我以为它只是从codepen过来的一个直端口。等等，好的。现在查看链接，告诉我这是否正确看看这个。非常感谢！很好，不过我相信我所做的一些编辑会带来一些问题。我想让文本居中这个JS提琴把文本居中，按钮固定了唯一的东西是下拉菜单中的链接啊，我以为它只是从codepen过来的一个直端口。等等，好的。现在查看链接，告诉我这是否正确看看这个。非常感谢！