如何在使用中央徽標導航欄時引導社交圖標導航欄

當我將社交圖標拉向右側時，它們最終將我的中央徽標向下推進一點，而不是放在與徽標相同的高度（即不高於標誌，在上面創建額外的空白空間）如何在使用中央徽標導航欄時引導社交圖標導航欄

我已經嘗試將它們浮動到左側，使位置絕對等，但沒有運氣。

有人可以幫助我，讓他們出現在屏幕的右上角，但沒有額外的空間，他們上面？

這裏是我的社會圖標的導航欄代碼：

HTML

<nav id="navbar-primary" class="navbar" role="navigation"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our Cars</a></li> 
    <a href="#"><img id="logo-navbar-middle" src="../assets/images/logo.png" width="250" alt="logo"></a> 
    <li><a href="#">Gallery</a></li> 
    <li><a href="#">Contact us</a></li> 
    </ul> 

<ul class="nav navbar-nav navbar-right pull-right"> 
      <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a> </li> 
      <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li> 
      <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
     </ul> 



    </div><!-- /.navbar-collapse -->     
    </div><!-- /.container-fluid --> 
</nav>

CSS

#navbar-primary .navbar-nav { 
background: #fff; 
width: 100%; 
text-align: center; 
li { 
display: inline-block; 
float: none; 
a { 
    padding-left: 30px; 
    padding-right: 30px; 
    padding-top:10px; 
} 
} 
} 


.social { 
margin: 0; 
padding: 0; 

} 

.social ul { 
margin: 0; 
padding: 5px; 
} 

.social ul li { 
margin: 5px; 
list-style: none outside none; 
display: inline-block; 
}

任何幫助非常感謝，我一直停留在這了數天

謝謝！

來源

2016-11-14 ck777

你想製作這樣的截圖嗎？ http://imgur.com/a/xpnHn – IamFaysal

是的，但只有徽標和導航鏈接全部居中 – ck777

我把它當作另一個網站的屏幕截圖，這很好，但由於某種原因，當我想要徽標和如果你知道我的意思，那麼它會創造出額外的空間。 – ck777

這是我做的，但可能有一些響應的問題，但它可能會幫助你。

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>TODO supply a title</title> 
      <meta charset="UTF-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
      <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
      <style type="text/css"> 
       .navbar .navbar-nav { 
        display: inline-block; 
        float: none; 
       } 

       .navbar .navbar-collapse { 
        text-align: center; 
       } 
       .top-nav{ 
        margin-bottom: 0; 
        padding-top: 10px; 
        min-height: 20px; 
       } 
       .top-nav .navbar-nav>li>a{ 
        padding: 0 5px 0 5px; 
       } 
       .top-nav .navbar-right{ 
        margin-right: 10px; 
       } 
       .logo{ 
        margin-top: -30px; 
       } 
      </style> 
     </head> 
     <body> 
      <nav class="navbar top-nav"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a> </li> 
        <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li> 
        <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li> 
       </ul> 
      </nav> 
      <nav id="navbar-primary" class="navbar" role="navigation"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <!-- Brand and toggle get grouped for better mobile display --> 
          <div class="navbar-header"> 
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
           </button> 
          </div> 
          <div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
           <ul class="nav navbar-nav"> 
            <li><a href="#">About Us</a></li> 
            <li><a href="#">Our Cars</a></li> 
            <li><a href="#" style="padding-top: 0;"><img class="logo" src="logo.png" alt="Silver Lining Wedding and Classic Car Chauffeurs Nottingham Logo"></a></li> 
            <li><a href="#">Gallery</a></li> 
            <li><a href="#">Contact us</a></li> 
           </ul> 
          </div><!-- /.navbar-collapse -->   
         </div> 
        </div> 
       </div><!-- /.container-fluid --> 
      </nav> 
      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     </body> 
    </html>

來源

2016-11-14 05:38:04 IamFaysal

謝謝！我相信我可以理清這些敏感問題。當圖標在那裏時，這會消除徽標和右側之間的額外空間嗎？謝謝 – ck777

是的。您可以直接將此代碼粘貼到html文件，只需添加徽標並進行檢查即可。 – IamFaysal

不要忘了點擊接受答案，如果它真的幫助你。 – IamFaysal

如何在使用中央徽標導航欄時引導社交圖標導航欄

回答

相關問題