如何在导航栏中并排放置SVG图标且不破坏原有动画效果

核心问题梳理 #

• 你给#tumblr、#twitter单独设置了数百像素的左内边距，直接导致图标错位
• 导航菜单ul用了绝对定位脱离文档流，和图标区域互相挤压干扰
• 图标容器没有统一的弹性布局控制，无法自动并排排列
• 原有HTML结构混乱，导航菜单和图标放在同一个

  标签内，布局逻辑不清晰

修改后的代码 #

CSS代码 #

/* 全局重置，避免浏览器默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {      
  margin: 0;           
  padding: 20px 0px;           
  background: rgb(228, 211, 228);             
  display: flex;     
  border-radius: 15px;
  gap: 20px; /* 控制菜单选项间距 */
  list-style: none;
}         

ul li a{     
  text-align: center;     
  display: block;
  text-decoration: none;
  padding: 0 15px;
}         

/* 导航容器布局：左右分开排列 */
.container {     
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}          

/* 图标容器布局：控制图标并排 */
.social-icons {
  display: flex;
  align-items: center;
  gap: 15px; /* 控制图标之间的间距 */
}

/* 统一图标大小，移除原有多余边距 */
.social-icons svg {
  width: 25px;
  height: 25px;
  fill: rgb(248, 233, 185);
}

HTML代码 #

<nav class="container" style="background-color:#7B68EE; height:60px; width: 100%; border: 3px solid">
  <!-- 左侧导航菜单区域 -->
  <div class="navbar">
    <div id="nave">           
      <ul>       
        <li><a href="Folders"> Folders</a></li>       
        <li><a href="Files"> Files</a></li>       
        <li><a href="content"> Content</a></li>         
        <li><a href="Home"> Home</a></li>              
        <li><a href="Documents"> Documents </a></li>        
      </ul>       
    </div>      
  </div>
  <!-- 右上角社交图标区域 -->
  <div class="social-icons">
    <a href="#" class="hrv-icon-bounce">
      <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"
  class="svg-inline--fa fa-tumblr fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">          
 <path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
          0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 
            10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
            3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>
    </a>
    <a href="#" class="hrv-icon-bounce">
      <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">        
      <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 
      49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
       7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 
       46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
    </a>
    <!-- 剩余3个图标直接在此处按照现有结构新增a标签即可 -->
  </div>
</nav>

效果说明 #

• 导航菜单居左排列，社交图标固定在导航栏右上角，自动并排对齐
• 完整保留原有hrv-icon-bounce动画类，不会破坏原有的按钮动画效果
• 后续添加剩余3个社交图标时，直接在.social-icons容器内按照现有图标结构新增即可，自动适配布局

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