HTML/CSS如何实现页面缩小时列表自动垂直排列

• 首先你的现有代码存在HTML结构语法错误：<nav class="topnav"> 起始标签写在.pic容器内，结束标签却写在.words容器内，嵌套结构混乱，需要先修正这个问题
• 当前仅针对.pic做了响应式适配，没有针对导航链接设置响应式排列规则，这是无法实现小屏幕垂直排列的核心原因

修正后的代码 #

HTML代码 #

<div class="pic">
  <img class="logo" src="https://via.placeholder.com/150x50.png?text=Freaky+Fashion" alt="" />
  <p> <input class="navig" type="search"></p>
</div>
<nav class="topnav">
  <div class="words">
    <a href="#Nyheter">Nyheter</a>
    <a href="#Kategorier">Kategorier</a>
    <a href="#Topplistan">Topplistan</a>
    <a href="#Rea">Rea</a>
    <a href="#Kampanjer">Kampanjer</a>
  </div>
</nav>

CSS代码 #

p {
  word-spacing: 22px;
}

.pic {
  display: flex;
  align-items: center; /* 垂直对齐logo和搜索框 */
}

.navig {
  margin-left: 30px;
  margin-top: 20px;
}

/* 导航默认水平排列 */
.words {
  display: flex;
  gap: 22px; /* 替代word-spacing，更适合flex布局的间距控制 */
  padding: 10px 0;
}

.words a {
  text-decoration: none;
}

@media screen and (max-width: 563px) {
  .pic {
    display: block; /* 替换table属性，更适配移动端排列逻辑 */
  }
  /* 小屏幕下导航改为垂直排列 */
  .words {
    flex-direction: column;
    gap: 12px; /* 调整垂直排列的上下间距 */
  }
  .navig {
    margin-left: 0; /* 避免小屏幕下搜索框左边距过大溢出 */
  }
}

实现逻辑 #

• 导航默认使用flex布局水平排列，用gap控制链接之间的间距，比原有word-spacing的兼容性和可控性更强
• 在max-width: 563px的媒体查询断点中，将.words的flex-direction设置为column，导航链接就会自动切换为从上到下的垂直排列，匹配你需要的小屏幕展示效果

内容的提问来源于stack exchange，提问作者Andrea Demitri Seferi