删除列表项和导航顶部之间的间隙[重复]答案

【问题标题】：Remove gap between list items and top of navigation [duplicate]删除列表项和导航顶部之间的间隙[重复]
【发布时间】：2020-11-01 06:52:20
【问题描述】：

大家好，这里是初级开发人员，我的网页遇到了很多问题。

但主要的是我的导航链接和导航栏顶部之间的差距。

我尝试了很多解决方案，但似乎都没有帮助。即使对于网站中的其他问题，也真的很感激任何帮助。请记住，该网站远未完成，我是初学者。谢谢。

enter image description here

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>  

<!-- Code for Header Navgation -->
<div id="topnav">
    <ul >
        <li class="link"><a href="dinnerdrone.html">Home</a></li>
        <li class="link"><a href="contactus.html">Contact Us</a></li>
        <li class="link"><a href="login.html">Log In</a></li>
        <li class="link"><a href="signup.html">Sign Up</a></li>
        <li class="link"><a href="aboutus.html">About Us</a></li>
    </ul> 
</div>

<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>

<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>

CSS：

/* Body styles*/
body {
  font-family:verdana,geneva,helvetica;
  background-color: #0B0C10;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/* The navigation bar styles */
#topnav {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #66FCF1;
  text-decoration: none;
  width: 100%;
  height: 80px;
}

/* website navigation bar list styles*/
#topnav li {
  background-color: white;
  float: right;
}

/* website navigation bar link styles*/
#topnav a {
  display: block;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 17px;
  height: 100%; 
  color: #66FCF1;
  font-size: 22px;
  text-decoration: none;
}

#topnav a:hover {
  transition: 0.5s;
  color: blue;
}

/* Style for web heading beneath topnav */
#title {
  color: #66FCF1;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  font-size: 100px;
}

/* Style for text beneath title */
#subtitle {
  background-color: #5CDB95;
  margin-top: 20px;
  text-align: center;
  border: 1px solid black;
  font-size: 30px;
}

【问题讨论】：

标签： html css

【解决方案1】：

#topnav ul{
  margin: 0;
}

对于浏览器，ul 元素默认有一些边距。所以这个选择器应该修复它。

【讨论】：

【解决方案2】：

在导航栏中将 ul 的边距设置为 0

body {
  font-family:verdana,geneva,helvetica;
  background-color: #0B0C10;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/* The navigation bar styles */
#topnav {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #66FCF1;
  text-decoration: none;
  width: 100%;
  height: 80px;
}

/* website navigation bar list styles*/
#topnav li {
  background-color: white;
  float: right;
}

ul{
margin:0;}

/* website navigation bar link styles*/
#topnav a {
  display: block;
 padding-top: 20px;
  padding-right: 15px;
 padding-bottom: 17px;
 height: 100%; 
  color: #66FCF1;
  font-size: 22px;
  text-decoration: none;
}

#topnav a:hover {
  transition: 0.5s;
  color: blue;
}

/* Style for web heading beneath topnav */
#title {
  color: #66FCF1;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  font-size: 100px;
}

/* Style for text beneath title */
#subtitle {
  background-color: #5CDB95;
  margin-top: 20px;
  text-align: center;
  border: 1px solid black;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>  

<!-- Code for Header Navgation -->
<div id="topnav">
    <ul >
        <li class="link"><a href="dinnerdrone.html">Home</a></li>
        <li class="link"><a href="contactus.html">Contact Us</a></li>
        <li class="link"><a href="login.html">Log In</a></li>
        <li class="link"><a href="signup.html">Sign Up</a></li>
        <li class="link"><a href="aboutus.html">About Us</a></li>
    </ul> 
</div>

<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>

<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>

【讨论】：

【解决方案3】：

在导航栏中你的 ul 上有一些默认边距。

#topnav ul{
  margin:0;
}

或使用以下命令重置所有元素的边距和填充：

* {
  margin: 0;
  padding: 0;
}

【讨论】：

嗨，我试过了：#topnav ul{ margin:0;但现在差距在底部，不知道我做错了什么
您将#topnav 的高度设置为80px，但您的项目不够高，无法填充#topnav 的高度。

【解决方案4】：

您可以使用 flex 获得适当的高度来设置导航链接。下面 sn-p 显示它。

.topbar {
  width: 100%;
  height: 60px;
  background-color: #eee;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.logo {
  position: relative;
  width: 20%;
  background-color: red;
}

.navbar { 
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.navbar a {
  padding: 0 5px;
  text-decoration: none;
  color: #000;
}

<div class="topbar">
  <div class="logo">
  Logo
  </div>
  <div class="navbar">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
    <a href="#">Link5</a>
    <a href="#">Link6</a>
  </div>
</div>

【讨论】：

【解决方案5】：

在导航栏中将 ul 的边距设置为 0，并将 #topnav li 高度设置为 80px

body {
  font-family:verdana,geneva,helvetica;
  background-color: #0B0C10;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/* The navigation bar styles */
#topnav {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #66FCF1;
  text-decoration: none;
  width: 100%;
  height: 80px;
}

/* website navigation bar list styles*/
#topnav li {
  background-color: white;
  float: right;
  height:80px;
}

ul{
margin:0;}

/* website navigation bar link styles*/
#topnav a {
  display: block;
 padding-top: 20px;
  padding-right: 15px;
 padding-bottom: 17px;
 height: 100%; 
  color: #66FCF1;
  font-size: 22px;
  text-decoration: none;
}

#topnav a:hover {
  transition: 0.5s;
  color: blue;
}

/* Style for web heading beneath topnav */
#title {
  color: #66FCF1;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  font-size: 100px;
}

/* Style for text beneath title */
#subtitle {
  background-color: #5CDB95;
  margin-top: 20px;
  text-align: center;
  border: 1px solid black;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>  

<!-- Code for Header Navgation -->
<div id="topnav">
    <ul >
        <li class="link"><a href="dinnerdrone.html">Home</a></li>
        <li class="link"><a href="contactus.html">Contact Us</a></li>
        <li class="link"><a href="login.html">Log In</a></li>
        <li class="link"><a href="signup.html">Sign Up</a></li>
        <li class="link"><a href="aboutus.html">About Us</a></li>
    </ul> 
</div>

<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>

<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>

【讨论】：