如何修复含hover与链接功能的圆形菜单响应式挤压问题？

嘿，我帮你找到了这个圆形菜单挤压问题的根源，其实和hover效果本身关系不大，是你的布局基础没做好导致的！先给你拆解问题，再给你彻底的解决方案：

问题根源分析 #

1. 固定像素宽高+Flex未换行：你给.ch-grid li设了固定的220px宽和90px高（而且这俩数值不等，根本做不了正圆形...），再加上flex容器#test1没开flex-wrap: wrap，屏幕变窄时项目挤在一行，自然会被挤压变形。
2. 重复ID违规：多个<li>用了同一个id="test2"，这是HTML语法错误，会导致样式和交互的不可预期问题，必须改成class。
3. 圆形元素的比例失控：你的.test2设了width:15%但没对应调整高度，加上父元素固定尺寸，圆形的比例很容易在响应式场景下崩掉。

彻底解决方案 #

下面是修改后的完整代码，我会标注关键修改点：

修改后的HTML（修复重复ID）

<ul id="test1" class="ch-grid">
<li class="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_hansie_hansumus.jpg" />
<div class="ch-info">
<p><a href="https://nkbv.nl">Hansie<BR>Hansumus</a></p>
</div>
</div>
</li>
<li class="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_missie_marble.jpg" />
<div class="ch-info">
<p><a href="https://kakivi.de">Missie<BR>Marble</a></p>
</div>
</div>
</li>
<li class="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_piotr_linski.jpg" />
<div class="ch-info">
<p><a href="https://telegraaf.nl">Piotr<BR>Linski</a></p>
</div>
</div>
</li>
<li class="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_red.jpg" />
<div class="ch-info">
<p><a href="https://www.tukhut.nl">Mister<BR>Red</a></p>
</div>
</div>
</li>
<li class="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_green.jpg" />
<div class="ch-info">
<p><a href="https://www.alumnei.nl">Miss<BR>Green</a></p>
</div>
</div>
</li>
<li class="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_blue.jpg" />
<div class="ch-info">
<p><a href="https://www.astronieuws.nl">Mister<BR>Blue</a></p>
</div>
</div>
</li>
</ul>

修改后的CSS（核心布局调整）

ul, li { list-style: none; margin: 0; padding: 0; }
#test1 { 
  display: -webkit-flex; 
  display: flex; 
  text-align: center; 
  justify-content: space-between; 
  flex-wrap: wrap; /* 关键：开启自动换行 */
  margin-bottom: 30px; 
  margin-left: 35px; 
  margin-right: 35px; 
  gap: 10px; /* 用gap设置项目间距，比margin更省心 */
}
.test2 { /* 把id改成class */
  width: 100%; 
  text-align: center; 
  position: relative; 
  border-radius: 50%; 
  overflow: hidden; 
  background-color: #ff0082;
}
ul li img { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  object-fit: cover; 
}
.ch-grid:after, .ch-item:before { content: ''; display: table; }
.ch-grid:after { clear: both; }
.ch-grid li { 
  width: calc(16.666% - 5px); /* 6个项目平分宽度，减去gap的一半 */
  padding-bottom: calc(16.666% - 5px); /* 用padding-bottom维持正方形比例 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-item { 
  width: 100%; 
  height: 100%; 
  border-radius: 50%; 
  overflow: hidden; 
  position: relative; 
  cursor: default; 
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1); 
  transition: all 0.4s ease-in-out; 
}
.ch-info { 
  position: absolute; 
  background: rgba(63, 147, 147, 0.8); 
  width: inherit; 
  height: inherit; 
  border-radius: 50%; 
  overflow: hidden; 
  opacity: 0; 
  transition: all 0.4s ease-in-out; 
  transform: scale(0); 
}
.ch-info p { 
  color: #fff; 
  padding: 13px 0px; 
  font-style: normal; 
  font-size: 9px; 
  border-top: 1px solid rgba(255, 255, 255, 0.5); 
  opacity: 0; 
  transition: all 1s ease-in-out 0.4s; 
}
.ch-info p a { 
  display: block; 
  color: rgba(255, 255, 255, 0.7); 
  font-style: normal; 
  font-weight: 700; 
  font-size: 140%; 
  letter-spacing: 1px; 
  padding-top: 4px; 
  font-family: 'Open Sans', Arial, sans-serif; 
}
.ch-info p a:hover { color: rgba(255, 242, 34, 0.8); }
.ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); }
.ch-item:hover .ch-info { transform: scale(1); opacity: 1; }
.ch-item:hover .ch-info p { opacity: 1; }

关键修改说明 #

• Flex换行：给#test1加了flex-wrap: wrap和gap，屏幕窄时项目自动换行，不会挤在一起。
• 响应式正方形：用width: calc(16.666% - 5px)和padding-bottom: calc(16.666% - 5px)让每个li保持正方形，不管屏幕多大，圆形比例都不会崩。
• 修复重复ID：把id="test2"改成class="test2"，符合HTML语法规范。
• 简化间距控制：用flex的gap代替margin，项目间距更均匀，不用额外计算边距。

这样修改后，你的菜单不管怎么调整屏幕宽度，都会自适应换行，圆形保持比例，hover效果也完全正常，再也不用依赖@media的临时补丁啦！

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