html - HTML+CSS - 顶部导航栏不会跨屏 100% 宽度

问题描述

我的导航栏不会完全穿过屏幕。顶部、左侧和右侧都有白条。我需要删除这些边距并使我的导航栏占据整个空间。

我的代码：

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
  }
  
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css">
</header>
<body>
    <!--TOPNAV-->
    <div class="topnav">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
</div>
</body>
</html>

将此作为输出：

我想删除顶部、底部和侧面的白条

标签： htmlcss

html - HTML+CSS - 顶部导航栏不会跨屏 100% 宽度

问题描述

解决方案

推荐阅读