Html 可折叠导航条未按预期工作，并产生不必要的填充（未使用引导）

我正在尝试创建一个简单的导航栏，当它调整大小（变小）时，将创建一个小菜单，单击该菜单将显示链接，很像引导

问题1：调整大小后，链接确实会按预期消失，但当我展开小菜单（单击“显示导航”）时，链接（链接1、链接2等）会显示在我的徽标上，并且通常处于关闭位置（我希望链接整齐显示，如下图所示）

问题2：如下图所示，由于某种原因，我的代码导致每个

之间出现了一个间隙

---

下面是一个用来显示问题和使用的代码的小提琴：

对于第二个问题，关于填充，问题在这里：

#nav > ul > li{
  width: 25%; //Here you are forcing to 1/4 of the space, remove this line
  height: 100%;
  float: left;
}

我不知道片段大小是否会让您看到更改

#包装器{
宽度：100%；
高度：自动；
}
#标题{
高度：自动；
边框底部：1px纯黑；
}
#标志{
浮动：左；
}
/*******************主导航************************/
mainNav先生{
利润率：10px；
}
#导航>a{
显示：无；
}
#李海军{
位置：相对位置；
}
#导航>ul{
高度：3.75em；
}
#导航>ul>li{
身高：100%；
浮动：左；
}
#纳夫利乌尔{
显示：无；
位置：绝对位置；
最高：100%；
}
#李海军：悬停{
显示：块；
}
@仅介质屏幕和（最大宽度：40em）{
#导航{
位置：相对位置；
}
#导航>a{
}
#导航：非（：目标）>a:第一种类型，
#导航：目标>a：类型的最后一个
{
显示：块；
}
/*一级*/
#导航>ul
{
高度：自动；
显示：无；
位置：绝对位置；
左：0；
右：0；
}
#导航：目标>ul
{
显示：块；
}
#导航>ul>li
{
宽度：100%；
浮动：无；
}
/*二级*/
#纳夫利乌尔
{
位置：静态；
}
}
/***********************/
/*从列表中删除边距和填充*/
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
/*将列表项并排浮动*/
ul.topnav li{
浮动：左；
}
/*设置列表项内链接的样式*/
ul.topnav li a{
显示：内联块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字体大小：14px；
}
/*更改悬停时链接的背景色*/
ul.topnav李a：悬停{
背景色：#f9f9f9；
颜色：深色；
过渡：0.3s；
}
/*隐藏包含应在小屏幕上打开和关闭topnav的链接的列表项*/
ul.topnav li.icon{
显示：无；
}
/*当屏幕宽度小于680像素时，隐藏除第一个（“主页”）之外的所有列表项。显示包含打开和关闭topnav（li.icon）链接的列表项*/
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。这个类使topnav在小屏幕上看起来很好*/
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
}

调整窗口大小

我已经回答了您解决第二个问题的一种方法，我正在分析您的问题以了解您的第一个问题。如果你也添加了JS，那就太好了。Thanks@FacundoLaRocca啊，太好了，你的回答解决了关于间距的问题，谢谢。你说的JS是指JavaScript吗？我没有任何JavaScript。所有相关代码都显示在小提琴上。