无法在外部样式表实现flex-wrap、grid等布局，且不可修改HTML及新增选择器

一、实现水平导航栏（支持自动换行） #

方法1：Flexbox布局（推荐，更灵活） #

直接修改nav ul选择器，添加Flex相关属性即可，完全不需要额外div：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 新增属性 */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em; /* 可选，控制菜单项之间的间距 */
}

• display: flex：将ul转为Flex容器，内部的li会自动水平排列
• flex-wrap: wrap：当视口宽度不足以容纳所有菜单项时，自动换行到下一行
• gap：替代传统的margin间距设置，避免间距计算混乱

方法2：Grid布局 #

同样修改nav ul选择器，用Grid实现自适应换行：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 新增属性 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5em;
}

• grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))：自动根据视口宽度分配列数，每列最小宽度120px，多余空间平均分配，宽度不足时自动换行

二、修复粘性导航栏（position: sticky无效问题） #

之前position: sticky无效的核心原因是未设置top属性——sticky需要明确触发固定的偏移位置。修改nav选择器：

nav {
  background-color: #000;
  padding: .5em;
  /* 新增属性 */
  position: sticky;
  top: 0;
  z-index: 100; /* 可选，防止导航栏被下方内容遮挡 */
}

• top: 0：指定导航栏滚动到视口顶部时触发固定
• z-index: 100：确保导航栏层级高于其他内容，避免被覆盖

完整修改后的CSS示例（Flex版本） #

nav {
  background-color: #000;
  padding: .5em;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: .5em 1em;
}

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