鼠标悬停搜索图标时.forma元素挤压导航列表的CSS解决方法咨询

Hey there! The problem you're seeing happens because your .forma element is part of the flex layout in your <nav>, so when it expands on hover, it pushes the adjacent .nav-ul to make space for its new width. Let's fix this with two key adjustments:

1. Take the Search Container Out of the Flex Flow #

By making .forma absolutely positioned, it won't participate in the flex layout's space calculation anymore—so its width changes won't affect the links. Update your .forma CSS like this:

.forma {
  position: absolute; /* Change from relative to absolute */
  top: 50%;
  right: 15px; /* Match nav's padding-right to keep original position */
  transform: translate(0, -50%);
  transition: all 1s;
  width: 50px;
  height: 50px;
  background: white;
  box-sizing: border-box;
  border-radius: 25px;
  border: 4px solid white;
  padding: 5px;
}

Since your <nav> already has position: sticky (which acts like relative for child positioning), this will work perfectly—.forma will stay anchored to the top-right of the nav without interfering with other elements.

2. Clean Up the Link List Layout (Optional but Recommended) #

Your current .nav-ul uses floats, which don't play well with flex containers. Let's convert it to flex to make the link layout more reliable:

.nav-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* Use flex instead of floats */
  gap: 0; /* Keep consistent spacing */
}

.nav-ul li {
  /* Remove float: left; */
}

.nav-ul li:last-child {
  margin-left: auto; /* Push the last link to the right (instead of float:right) */
}

This ensures your links align correctly and don't have unexpected layout issues with the flex nav.

Why This Works #

• Absolute positioning takes .forma out of the normal document flow, so its width expansion doesn't force other elements to move.
• Using flex for the link list replaces unreliable floats with a modern layout method that works seamlessly with the nav's flex container.

Test it out—hover the search icon now, and your links should stay put while the search input expands!

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