页面缩放时顶部导航栏显示异常问题求助

我在SharePoint网站中通过Modern Script Editor插件实现了一个HTML/CSS导航栏，遇到显示异常问题：当页面缩小或放大时，导航栏会被拆分为两行。

100%页面尺寸时顶部导航栏的显示状态：

约80%页面尺寸时顶部导航栏的显示状态：

我不太清楚根本原因，因为图标也会缩放，理论上不应引发问题。
我曾尝试加宽导航栏来修复，但这会导致最后一项“KPIs und Reifegrad”在:hover状态下无法完全变色，因此希望排除该解决方案。

有没有办法可以阻止这种现象？

原代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.topnav {
  overflow: hidden;
  width: 1085px;
  background-color: lightgrey;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  position: center;
  margin-left: -32px;
}

.topnav a {
  float: left;
  color: black;
  background-color: lightgrey;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  border-left: 1px solid black;
}

.topnav div a {
  float: left;
  color: lightgrey;
  background-color: grey;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  border-left: 1px solid black;
}

.topnav a:hover {
  background-color: darkgrey;
  color: white;
}

.topnav div a:hover {
  background-color: grey;
  color: lightgrey;
  cursor: not-allowed;
}

</style>
</head>
<body>
    

<div class="topnav">
  <a class="active" href=""><i class="fa fa-home"></i>&nbsp; Index</a>
 
     <a href="">Ziele</a>
     <a href="">Organisation & Rollen</a>
     <a href="">Standards</a>     
     <a href="">Software</a>
     <a href="">Kommunikation</a>
     <a href="">Innovation</a>
     <a href="">Prozesse</a>
  
     <div>
        <a>Ausbildung</a>
     </div>

     <a href="">Projekte</a>
     <a href="">KPIs und Reifegrad</a>
</div>
</body>
</html>

代码未做修改，仅移除了指向本地SharePoint路径的href。

问题原因 #

1. 导航栏使用了固定宽度width: 1085px，页面缩放时容器实际可用宽度变化，当容器宽度小于内部元素总宽度时，浮动元素会自动换行。
2. position: center是无效属性，无法实现居中，反而可能导致布局偏移。
3. 内部嵌套的<div>破坏了浮动布局的连续性，进一步加剧了换行问题。

修复方案 #

改用Flexbox弹性布局替代浮动，让导航栏自适应容器宽度，同时强制不换行，解决hover变色异常：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.topnav {
  display: flex; /* 启用弹性布局 */
  flex-wrap: nowrap; /* 强制不换行 */
  width: 100%; /* 自适应容器宽度，可根据需求改为max-width: 1085px */
  background-color: lightgrey;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  margin-left: -32px;
}

.topnav a {
  flex-shrink: 0; /* 禁止元素收缩，保持原有尺寸 */
  color: black;
  background-color: lightgrey;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  border-left: 1px solid black;
}

.topnav .disabled-link { /* 用类替代嵌套div，避免布局破坏 */
  color: lightgrey;
  background-color: grey;
}

.topnav a:hover:not(.disabled-link) { /* 仅对可点击链接应用hover效果 */
  background-color: darkgrey;
  color: white;
}

.topnav .disabled-link:hover {
  background-color: grey;
  color: lightgrey;
  cursor: not-allowed;
}

</style>
</head>
<body>
    

<div class="topnav">
  <a class="active" href=""><i class="fa fa-home"></i>&nbsp; Index</a>
  <a href="">Ziele</a>
  <a href="">Organisation & Rollen</a>
  <a href="">Standards</a>     
  <a href="">Software</a>
  <a href="">Kommunikation</a>
  <a href="">Innovation</a>
  <a href="">Prozesse</a>
  <a class="disabled-link">Ausbildung</a> <!-- 替换嵌套div为类 -->
  <a href="">Projekte</a>
  <a href="">KPIs und Reifegrad</a>
</div>
</body>
</html>

关键修改说明 #

1. 给.topnav添加display: flex和flex-wrap: nowrap，强制所有导航项在一行显示，不会因页面缩放换行。
2. 移除无效的position: center，将固定宽度改为width: 100%（若需要限制最大宽度，可添加max-width: 1085px）。
3. 用.disabled-link类替代嵌套的<div>，避免破坏Flex布局结构，同时简化样式逻辑。
4. 给导航项添加flex-shrink: 0，防止元素被压缩变形。
5. 优化hover选择器，确保只有可点击链接触发变色效果，解决原方案中最后一项hover不全的问题。

内容的提问来源于stack exchange，提问作者cheese steak jimmy's