如何让固定定位navbar导航栏居中且占满屏幕左右宽度

导航栏样式问题修复方案 #

问题根源 #

• 导航栏无法占满全屏宽度：fixed定位元素默认宽度由内容撑开，你没有为它显式设置全屏宽度
• 导航栏内容无法居中：你给.navbar a设置了float: left，浮动元素脱离正常文档流，父元素的text-align: center对浮动元素不生效

修复代码（推荐使用flex布局，兼容所有现代浏览器） #

.navbar {
  background-color: gray;
  position: fixed;
  top: 0;
  left: 0; /* 消除浏览器默认边距导致的左侧偏移 */
  width: 100%; /* 实现导航栏占满屏幕全宽 */
  display: flex;
  justify-content: center; /* 实现所有导航链接整体水平居中 */
}

.navbar a {
  color: white;
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  /* 已删除冗余的float: left、display: block、text-align: center属性 */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

HTML代码不需要做任何修改即可生效。

旧浏览器兼容方案（无需flex，兼容IE9及以上） #

如果需要适配非常老的不支持flex的浏览器，可以使用以下CSS修改方案：

.navbar {
  background-color: gray;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.navbar a {
  color: white;
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block;
  /* 已删除原有的float: left属性 */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

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