带有导航栏的Css错误

每当开关出现在我的网页导航栏中时，我都会遇到一个奇怪的问题，我做了一把小提琴来复制这个问题：

正如你所看到的，我想要实现的是导航栏下方的开关

我的问题是…为什么如果它在导航栏下面的开关上工作，它不在导航栏内部的开关上工作？它有相同的结构…它应该工作！ 不知道为什么它会将文本推到开关外

---

有什么想法吗？

首先，您的html中有一个输入错误：

<span class="off center-align" style="color: white;">Today</span>
   <span class="on center-align" style="color: white;"></span>
   Weekend
</span>

---

如果没有它，他们将从导航系统继承行高：56px。

非常感谢，但我已经用类似的东西修复了它。开关{线高度：正常}。几乎一样，所以你竖起了大拇指！

<span class="off center-align" style="color: white;">Today</span>
   <span class="on center-align" style="color: white;"></span>
   Weekend
</span>

.switch label .lever, .switch label .lever span {line-height:20px}