导航栏上方有空白

Question

我正在设计一个网站，因为我正在向其添加可点击的按钮。我的导航栏上面有一些空白。

以前我曾发布过同样的问题，但现在我不知道我的CSS出了什么问题。请纠正或指出我的 CSS 哪里做错了。我不想渲染我的导航栏，其上方有空白。

所以，请更改 CSS，并告诉我哪里出错了。

我还添加了 css 图标。正如我

function myFunction(event) {

  var clickedElement = event.target;

  console.log(clickedElement);

  if (clickedElement.nodeName != 'BUTTON') {

    clickedElement = clickedElement.parentElement;

  }

  var dropdownElement = clickedElement.nextElementSibling;

  dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop

  var allOtherDropdowns = document.getElementsByClassName('dropdown-content');

  //close all other dropdowns

  for (var i = 0; i < allOtherDropdowns.length; i++) {

    if (!allOtherDropdowns[i].classList.contains('tempClass')) {

      allOtherDropdowns[i].classList.remove('show');

    }

  }

  dropdownElement.classList.toggle("show");

  dropdownElement.classList.remove('tempClass'); //removing the temp class here

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(e) {

  if (!e.target.matches('.dropbtn')) {

    var allDropdowns = document.getElementsByClassName('dropdown-content');

    //close all other dropdowns

    for (var i = 0; i < allDropdowns.length; i++) {

      allDropdowns[i].classList.remove('show');

    }

  }

}

Answer 1

你的h3文字Dropdown Menu inside a Navigation Bar有一个边距。而且你的身体也有很小的余量。现在应该好了。function myFunction(event) {&nbsp; var clickedElement = event.target;&nbsp; //console.log(clickedElement);&nbsp; if (clickedElement.nodeName != 'BUTTON') {&nbsp; &nbsp; clickedElement = clickedElement.parentElement;&nbsp; }&nbsp; var dropdownElement = clickedElement.nextElementSibling;&nbsp; dropdownElement.classList.add('tempClass'); //adding tempclass to avoid this in below loop&nbsp; var allOtherDropdowns = document.getElementsByClassName('dropdown-content');&nbsp; //close all other dropdowns&nbsp; for (var i = 0; i < allOtherDropdowns.length; i++) {&nbsp; &nbsp; if (!allOtherDropdowns[i].classList.contains('tempClass')) {&nbsp; &nbsp; &nbsp; allOtherDropdowns[i].classList.remove('show');&nbsp; &nbsp; }&nbsp; }&nbsp; dropdownElement.classList.toggle("show");&nbsp; dropdownElement.classList.remove('tempClass'); //removing the temp class here}// Close the dropdown if the user clicks outside of itwindow.onclick = function(e) {&nbsp; if (!e.target.matches('.dropbtn')) {&nbsp; &nbsp; var allDropdowns = document.getElementsByClassName('dropdown-content');&nbsp; &nbsp; //close all other dropdowns&nbsp; &nbsp; for (var i = 0; i < allDropdowns.length; i++) {&nbsp; &nbsp; &nbsp; allDropdowns[i].classList.remove('show');&nbsp; &nbsp; }&nbsp; }}function myFunc(){return true}h3,body,html{&nbsp; margin:0;&nbsp; padding:0;}i {&nbsp; width: 0;&nbsp; height: 0;&nbsp; border-style: solid;&nbsp; border-width: 8px 5px 0 5px;&nbsp; border-color: #ffffff transparent transparent transparent;}.icon {&nbsp; position: relative;&nbsp; /* Adjust these values accordingly */&nbsp; top: 14px;&nbsp; left: 9px;}nav {&nbsp; height: 40px overflow: hidden;&nbsp; background-color: #333;&nbsp; font-family: Arial, Helvetica, sans-serif;}nav a {&nbsp; float: left;&nbsp; font-size: 16px;&nbsp; color: white;&nbsp; text-align: center;&nbsp; padding: 14px 16px;&nbsp; text-decoration: none;}.dropdown {&nbsp; float: left;&nbsp; overflow: hidden;}.drop-btn {&nbsp; float: right;}.dropdown .dropbtn {&nbsp; cursor: pointer;&nbsp; font-size: 14px;&nbsp; border: none;&nbsp; outline: none;&nbsp; color: white;&nbsp; padding: 10px 10px;&nbsp; background-color: inherit;&nbsp; font-family: inherit;&nbsp; margin: 0;}nav a:hover,.dropdown:hover .dropbtn,.dropbtn:focus {&nbsp; background-color: red;}.dropdown-content {&nbsp; display: none;&nbsp; position: absolute;&nbsp; background-color: #f9f9f9;&nbsp; min-width: 160px;&nbsp; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);&nbsp; z-index: 1;}.dropdown-content a {&nbsp; float: none;&nbsp; color: black;&nbsp; padding: 12px 16px;&nbsp; text-decoration: none;&nbsp; display: block;&nbsp; text-align: left;}.dropdown-content a:hover {&nbsp; background-color: #ddd;}.show {&nbsp; display: block;}<!DOCTYPE html><html><head>&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1"></head><body>&nbsp; <nav>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Programming&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">Java</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">C++</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Python</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Swift</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Platform&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">Linux</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Windows</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Development Editor</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn">Algorithm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 10</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 11</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 12</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 10</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 11</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 12</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="dropdown">&nbsp; &nbsp; &nbsp; <button class="dropbtn" onclick="myFunction(event)">Upgrade 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon"></i>&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" onclick="myFunc();">item 10</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 11</a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">item 12</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; <h3>Dropdown Menu inside a Navigation Bar</h3>&nbsp; &nbsp; &nbsp; <p>Click on the "Dropdown" link to see the dropdown menu.</p></body></html>