Html 导航栏下方的额外空间

我目前正试图建立一个网站，我设法创建了一个导航栏。然而，在我的导航栏之间有一个奇怪的“额外”空间。起初它工作得很好，但在我引用JQuery之后。然而，我怀疑JQuery是导致问题的原因，因为即使在我取出JQuery之后，该站点看起来还是一样的

我的HTML代码：

        <div id="nav">                                                                  <!-- Navigation Bar -->
            <nav>                                                                   
                <ul>
                    <li><a class="selected" href="#">Home</a></li>
                    <li><a href="about.html">About Me</a></li>                          <!-- Link to about page -->
                    <li class="drop">
                        <a href="games.html" class="dropbtn">Games</a>
                        <div class="drop-content">
                            <a href="rfg.html">Red Faction: Guerrilla</a>       <!-- Contains links to the respective pages -->
                            <a href="wots3.html">Way of the Samurai 3</a>
                            <a href="singularity.html">Singularity</a>
                        </div>
                    </li>
                    <li><a href="reviews.html">Reviews</a></li>
                    <li><a href="external.html">External Store</a></li>                 <!-- Link to external site -->
                    <li><a href="video.html">Videos</a></li>                            <!-- Contains links to Youtube -->
                    <li><a href="feedback.html">Feedback</a></li>                       <!--Feedback form-->

任何帮助都将不胜感激。多谢各位

下面是JSFIDLE文件，以便更方便地查看问题

编辑：添加了更多的CSS代码。

---

编辑：我解决了这个问题。感谢大家花时间解决此问题。

这似乎是CSS中其他地方的空白，此处未提供，导致此问题。您可以尝试设置

页边距底部：0一些地方，看看这是否解决了问题

#nav nav ul li {                                 
    margin-bottom: 0;
    padding-bottom: 0;
}


#nav nav ul li a {                                 
    margin-bottom: 0; 
}

或者提供样式表的其余部分。
这是由“外部存储”部分引起的，它太长，而且是包装的。您可以将其缩短或强制“不包裹”。

使用css属性
空白
和值
nowrap


您的内部标记上没有类，因此我建议在
a
标记中添加一个类，并向其添加规则

a.listLink{
    white-space: nowrap;
}

或者您可以只向特定标记添加一个样式属性，但我觉得该解决方案不够酷。
这很可能是因为您的
ul
作为
内联块
，这将在元素后产生一些空间。您的
li
上也有浮动，但导航上没有明确的定位

您可以用多种方法解决这个问题，这里有一种方法可以使用
display:flex
并移除
浮动：左打开
li
。通过更改
justify content
属性，这是一个非常坚实的基础。你可以在以下网址找到flexbox的绝妙指南：

更新

我对小提琴做了一些更新来解决这个问题。请注意上面的代码，我还做了一些其他更改。如果有不清楚的地方，就写下来

* {
    box-sizing: border-box;
}


这是一条建议，在询问类似问题时，将代码粘贴到JSFIDLE上。如果我们可以检查问题，它将更快地帮助您，更多的人将尝试。您没有关闭UL或您只是没有张贴在这里？似乎是最重要的部分要忽略。。。你们有更多的UL项目吗？我有一个结束UL和div，但我忘了把它贴在这里@MarkE@NawedKhan对不起，我还是个新手。我不知道如何使用JSFIDDLE，它似乎工作得很好。这里是小提琴：删除它只会使照片更接近导航栏。空间还在那里。谢谢你的回答。空间出现在UL定义的蓝色区域内。因此，从整个nav元素中删除外部（底部）边距不会有帮助。CSS中一定有其他东西导致了代码中未包含的问题。使用您在此处发布的内容效果很好：@Wellspring在绿色框下仍有一个蓝色空间。我想要做的是一个绿色的盒子，下面没有额外的蓝色空间。如果你在JS小提琴中看到蓝色空间，它是b/c，导航栏的宽度导致“外部存储”中断并显示在两行上。如果在JS FIDLE中展开结果区域，它将显示导航栏，但下方没有蓝色空格。这与你提供的照片不同，照片上有一行“外部商店”和蓝色空间。谢谢你的回答。如何强制“不包裹”？感谢您提供了如何强制“不包裹”的示例。我试过了，但没用。然而，我认为这可能对我有用。奇怪的是，它在JSFIDLE上对我有效。我刚刚将
更改为
来测试它。刚刚在示例中发现一个拼写错误，对不起。@Dejan.S我知道它重叠，这也是他需要解决的问题。我想我只是给出了一个过于简单的答案。我看到问题是包装，所以我告诉了如何预防。谢谢你的回答。我试过了，效果很好。我可以问一下display:flex和justify content:space之间有什么作用吗？@Noob我更新了我的答案，并添加了关于flexbox:）的信息链接，再次感谢您提供的解决方案。@标记绿色主选项下没有空格。我想这就是op想要解决的问题。这个例子还指出了css中的其他缺陷，比如没有clearfix的float。@Dejan.S我仍然可以看到下面的空白，除非我将渲染屏幕变大。虽然如果op对它满意，那么nvm。
* {
    box-sizing: border-box;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  background-color: #1C86EE;
  padding: 0;
  position: relative;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

#nav li {
  width: 14%;
}