CSS如何防止页面放大时菜单li元素自动换行

你可以选择以下任意一种方案修改代码，即可实现菜单按钮始终不换行： #

方案1：兼容旧浏览器的修改方案 #

在你现有#cssmenu ul的CSS规则中新增2个属性即可：

#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #e3d678;
  line-height: 100%;
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  /* 新增如下两行 */
  width: max-content;
  overflow-x: auto; /* 若不需要横向滚动条可改为hidden */
}

修改后额外检查#cssmenu的父容器是否存在固定宽度限制、overflow: hidden属性，如有对应限制按需调整即可。 #

方案2：现代浏览器更稳定的Flex布局方案 #

直接修改现有布局规则，兼容性覆盖所有主流现代浏览器：

#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #e3d678;
  line-height: 100%;
  /* 替换原有display、white-space相关属性为如下flex配置 */
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  overflow-x: auto; /* 若不需要横向滚动条可改为hidden */
}

#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  display: block;
  position: relative;
  list-style: none;
  /* 新增如下属性，禁止li被压缩宽度 */
  flex-shrink: 0;
}

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