为什么我的导航栏和我的页面两侧之间有一点差距？

Philip 发表于 Dev

菲利普

这是我的 html 和 css：

body {
  background-color: green;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  width: 100%;
}

.navbar a {
  float: left;
  font-size: 18px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 18px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navefix:hover, .dropdown:hover, .dropbtn {
  background-color: red;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>
  <div class="navbar">
      <a></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="location.href='index.html'">Index 
        </button>
        <div class="dropdown-content">
          <a href="page1.html">page1</a>
          <a href="page2.html">page2</a>
          <a href="page3.html">page3</a>
        </div>
      </div> 
      <a href="page4.html" class="navefix">page4</a>
    </div>
</body>

看你可以在剪下的代码中看到它，导航栏应该延伸到窗口之外，所以导航栏和页面两侧之间没有绿色空间。

koushikmln

只需margin: 0px为您的身体添加一个CSS 属性即可。身体上有一个默认的 8px 填充，这导致了这个问题。

body {
  background-color: green;
  margin: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  width: 100%;
}

.navbar a {
  float: left;
  font-size: 18px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 18px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navefix:hover, .dropdown:hover, .dropbtn {
  background-color: red;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>
  <div class="navbar">
      <a></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="location.href='index.html'">Index 
        </button>
        <div class="dropdown-content">
          <a href="page1.html">page1</a>
          <a href="page2.html">page2</a>
          <a href="page3.html">page3</a>
        </div>
      </div> 
      <a href="page4.html" class="navefix">page4</a>
    </div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。