如何实现覆盖整个屏幕顶部宽度的导航栏（navbar）？

实现全屏顶部导航栏的修改方案 #

你现有代码的核心问题是没有处理浏览器默认边距、没有给导航栏设置全屏宽度，同时存在少量HTML语法错误，修改后的完整代码如下：

修正后的CSS代码

/* 先重置浏览器默认边距和盒模型，避免出现多余空隙和横向滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部导航栏样式 */
.topnav {
  width: 100%; /* 占满整个屏幕宽度 */
  overflow: hidden;
  padding: 5px 10px;
  background-color: #000; /* 匹配你注释里标注的黑色背景，和示例效果对齐 */
  /* 如果需要导航栏固定在顶部不随页面滚动，可打开下方三行注释 */
  /*
  position: fixed;
  top: 0;
  z-index: 999;
  */
}

/* 导航栏链接样式 */
.topnav a {
  font-family: 'Roboto', sans-serif;
  float: left;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #fff;
  margin-right: 8px; /* 导航项之间加间隔，和参考效果对齐 */
  border-radius: 4px; /* 可选，加圆角更美观 */
}

/* 链接 hover 状态样式 */
.topnav a:hover {
  color: #ff726f;
}

/* 当前激活链接样式 */
.topnav a.active {
  background-color: #ff726f; /* 补充激活态背景色，避免白色文字和白色背景重合看不见 */
  color: #fff;
}

修正后的HTML代码

<div class="topnav">
  <a href="#">yes</a>
  <a class="active" href="index.html">Home</a>
  <a href="#">Commands</a>
  <a href="#">Community Server</a>
</div>
<!-- 如果你开启了导航栏fixed固定定位，需要给页面主体内容加对应高度的padding-top，避免内容被导航栏遮挡，比如 padding-top: 70px -->

内容的提问来源于stack exchange，提问作者TymeFlys