如何防止水平列表项在窗口水平缩小时垂直换行？

嘿，我来帮你搞定这个菜单的响应式问题！你想要的是当屏幕水平缩小时，菜单里的最后几项直接隐藏而不是换行，对吧？咱们可以用Flexbox来轻松实现这个需求，它比传统的float布局更适合处理这类弹性排列的场景。

问题分析 #

你原来的代码用了float: left来排列菜单项，这种方式在容器空间不足时，默认会让超出的项换行到下一行，这显然不符合你的预期。而Flexbox可以让我们精确控制项的排列和溢出行为。

修改后的解决方案代码 #

CSS部分

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  width: 80%; /* 保持你需要的80%宽度 */
  display: flex; /* 将列表转为flex容器 */
  flex-wrap: nowrap; /* 强制所有菜单项在一行，禁止换行 */
  overflow: hidden; /* 隐藏超出容器宽度的部分 */
}

li {
  white-space: nowrap; /* 确保单个菜单项内的文字不会换行 */
  flex-shrink: 1; /* 可选：允许菜单项适当缩小，让它们尽量靠近（不需要可去掉） */
}

li a {
  display: block;
  color: #808080;
  text-align: center;
  padding: 14px 30px 14px 0px;
  text-decoration: none;
  font-family: "open sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}

li a:hover {
  color: #DDD;
}

HTML部分（无需修改）

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Langley</a></li>
  <li><a href="#contact">Program</a></li>
  <li><a href="#about">About Lims</a></li>
  <li><a href="#contact">F.A.Q.</a></li>
  <li><a href="#about">News/Events</a></li>
  <li><a href="#about">Contact Us</a></li>
</ul>

关键属性说明 #

• display: flex：把<ul>转换为flex容器，让所有<li>作为弹性项横向排列
• flex-wrap: nowrap：强制所有弹性项保持在同一行，不会因为空间不足而换行
• overflow: hidden：当菜单项总宽度超过容器的80%宽度时，超出部分直接被隐藏，这就是你要的优先隐藏效果
• white-space: nowrap：防止单个菜单项内的文字因为空间不足而自动换行，保证每个项都是完整的一行
• flex-shrink: 1：如果想让菜单项在空间还足够时尽量相互靠近（比如适当压缩内边距或项的宽度），可以保留这个属性；如果希望菜单项保持固定宽度，直接超出隐藏，去掉这个属性即可

这样调整后，当屏幕缩小时，菜单会保持一行，超出容器的最后几项会被自动隐藏，完美符合你的需求！

内容的提问来源于stack exchange，提问作者J. Doe