Question

我正在尝试为我的网站创建导航栏，并且发生了一些奇怪的事情。它是导航栏周围的边框，我无法删除它？我试着搜索错误但没有任何效果。我尝试在样式标签中将边框设置为0px但是没有工作，边框仍然存在，怎么样？请帮助我，并提前致谢

代码在这里：

<!DOCTYPE html>
<html>
<head>
<style>
#nav {
  overflow: hidden;
  background-color: #282e30;
  border: 0px;
}

#nav a {
  float: left;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border: 0px;
}

#nav a.active {
    background-color: #286a82;
    color: white;
    border: 0px;
}
</style>
</head>
<body>

<div id="nav">
  <a class="active" href="/home.html">Home</a>
  <a href="/contact.html">Contact us!</a>
  <a href="/about.html">About!</a>
</div>

</body>
</html>

Answer 1

您的代码中不需要border: 0px;，它不是导航栏周围的边框，而是HTML中body元素的边距。默认情况下，<body>标记略有边距，导致它看起来像是在那里有边框。尝试在代码中添加body{margin:0px;}，它应该可以正常运行。像这样：

<style>
body {
  margin: 0px;
}
#nav {
  overflow: hidden;
  background-color: #282e30;
}

#nav a {
  float: left;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#nav a.active {
    background-color: #286a82;
    color: white;
}
</style>

导航栏周围有边框，无法移除

1 个答案: