在导航栏中并排保存 SVG 图标答案

【问题标题】：Keeping SVG icons side-by-side in the nav bar在导航栏中并排保存 SVG 图标
【发布时间】：2021-11-29 09:42:03
【问题描述】：

我的问题是当我要并排调整图标时，即使我放置了边距和填充我已经打开了许多网站，为了解决它我创建了这个按钮对齐的栏以及在它们之上实现了一个动画，但是如果我将图标放在这个栏的前面，它就会失去动画的完整性。我的目标是加入右上角的图标……除了twitter/tumblr我还有3个……

感谢所有帮助，我是编程初学者。

/*icones tumblr, insta*/      
.icones i {     
 display: inline-block;      
 width: 100%;      
 height: 30px;      
 padding: 0px 20px;       
 margin: 0px 5px;       
}          

ul {      
  position: absolute;      
  top:20%;      
  left: 45%;    
  transform: translate(-80%, -70%);      
  margin: 0%;           
  padding: 20px 0px;           
  background: rgb(228, 211, 228);             
  display: flex;     
  border-radius: 15px;     
}         

ul li a{     
  list-style: none;      
  text-align: center;     
  display: block;     
}         

#tumblr {     
  width: 25px;     
  padding-left: 700px;      
}         

 #twitter {     
  width: 45px;      
  padding-left: 600px;     
  margin-top: 10px;     
  margin-bottom: 2em;       
}      

.container {     
  display: grid;     
  grid-template-columns: 4fr 2fr;       
  grid-template-rows: 100px 50px;      
  grid-template-columns: auto auto auto auto auto auto;       
}          

#navbar {     
  display: flex;      
  flex-direction: column;       
  align-items: center;     
  grid-column: 1 / 5;
}

<nav class="container" style="background-color:#7B68EE; height:60px; width: 100%; text-align: center; border: 3px solid">

  <div class="navbar">
        
   <div id="nave">           

<p style="text-align:right; color:rgb(248, 233, 185)">   
      <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>        
             <li></li>        
          </ul>       

       <div class="navbar2">      
           <a href="#" class="hrv-icon-bounce">      
      <div id="tumblr">       
      <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>      
      </div>         
          </a>      


    <a href="#" class="hrv-icon-bounce">      
        <div id="twitter">      
          <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>      
  </div>      
 </a>       
    </p>      
    </div>      
 </div>       
  
</div>      
 </nav>

【问题讨论】：

如果您描述您希望页面的外观将会很有帮助。你说“加入右上角的图标”。但是菜单呢？也许您可以添加您希望页面外观的样机屏幕截图。你还提到了动画。但是您提供的代码中没有动画。
当然，我忘了，我什至想留个截图，但我来这里太晚了，我需要休息，我记得下一次是我的第一次，我不知道我需要担心组织代码以避免运行代码并让你们专注于自身的结构，但我想你们已经明白我需要什么了，谢谢我真的很感激这手，希望我倾向于完全理解，以便有一天自己做，但这样就可以了，而且有很大帮助！！！

标签： html css svg icons navbar

【解决方案1】：

我已经整理和简化了您的代码，并添加了一些 CSS 样式以使其显示我认为您可能想要的方式。我假设您希望文本菜单居中并将社交图标推到右侧。我已经在 CSS 中添加了 cmets，希望你能按照我的做法进行操作。

我已将导航栏的两个部分制成单独的无序列表 (ul)。
我正在使用 flex-box 布局来定位和调整这两个部分的大小。
我将文本菜单设置为flex: 1，因此它会展开以填充导航栏中的大部分空间。这会将社交图标推到栏的右侧。

在您开始编程时给您的最后一条建议：

养成与缩进保持一致的习惯。保持代码整洁将有助于您开发程序或网站。它将帮助以后可能需要处理它的任何其他人。

nav.navbar {
  /* Use a flex-box layout to put the menu and icons side by side */
  display: flex;
  /* Centre the flex children (the ULs) vertically in the flex box */
  align-items: center;

  background-color:#7B68EE;
  height:60px;
  width: 100%;
  text-align: center;
  border: 3px solid;
}

nav.navbar .menu {
  /* Removes standard list styling. Hide bullets, remove padding. */
  list-style: none;
  padding: 0;
  /* Make menu expand to fill most of the space in the menubar */
  flex: 1;
}

nav.navbar .menu li {
  /* Makes menu list items display horizontally rather than vertically */
  display: inline;
}

/* Add some spacing between the menu items */
nav.navbar .menu li:not(:first-child) {
  padding-left: 1em;
}

nav.navbar .social-icons {
  /* Removes standard list styling. Hide bullets, remove padding. */
  list-style: none;
  padding: 0;
}

nav.navbar .social-icons li {
  /* Makes social list items display horizontally rather than vertically */
  display: inline;
}

nav.navbar .social-icons svg {
  width: 30px;
  height: 30px;
}

<nav class="navbar">

  <ul class="menu">
    <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>

  <ul class ="social-icons">
    <li>
      <a href="#" class="hrv-icon-bounce">      
        <svg class="tumblr" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"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>
    </li>

    <li>
      <a href="#" class="hrv-icon-bounce">
        <svg class="twitter" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img"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>
    </li>
  </ul>

</nav>

【讨论】：