不能讓我的導航欄，以正確對齊

enter image description here

我不能讓鍾坐只是爲了資料圖片的左邊.. ..

這裏是我的HTML：

<header> 
<div class="navbar-top"> 
    <div class="navbar-container"> 
     <h1 class="navbar-heading pull-left"> 
     <a class="tributr-logo" href="{{pathFor 'stream'}}">Tributr </a><small class="tributr-logo">(Private Beta)</small> 
     </h1>   
     <div class="navbar-heading pull-right"> 
     <a style="color: #FFFFFF"><i class="fa fa-bell fa-2x"></i></a> 

     <div class="dropdown-toggle" type="button" data-toggle="dropdown">    
      <img class="navbar-photo" src="{{currentUser.profile.avatarURL}}" /> 
      {{currentUser.profile.firstName}} {{currentUser.profile.lastName}}  
      <div class="settings pull-right"><i class="fa fa-sort-asc fa-2x"></i></div> 
     </div> 
     <ul class="dropdown-menu col-md-2"> 
      <li><a href="{{pathFor 'profile'}}">Settings</a></li> 
      <li><a data-action="logout">Logout</a></li> 
     </ul> 
     </div> 
    </div> 
</div> 
</header>

這裏是我的CSS：

/* Nav Bar */ 
.navbar-top { 
    height: 64px; 
    background-color: #772A75; 
    position:fixed; 
    width: 100%; 
    min-height: 64px; 
    top: 0; 
    left: 0; 
    z-index:1000; 
    box-shadow: 0px 2px 10px #888888; 
} 

.navbar-container { 
    padding: 0 20px; 
    color: #FFFFFF; 
} 

.navbar-heading { 
    margin-top: 10px; 
} 


.tributr-logo { 
    color: #FFFFFF; 
} 

.tributr-logo:hover { 
    color: #FFFFFF; 
    text-decoration: none; 
} 


/* Right side of navbar */ 
.navbar-photo { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #DEE2EC; 
    border-radius: 100px; 
    height: 45px; 
    width: 45px; 
    margin-right: 10px; 
    } 

.settings { 
    margin-top: -42px; 
    margin-left: 30px; 
} 


    /* Drop down menus */ 
#app .dropdown-menu { 
    background-color: #772A75; 
} 

.dropdown-menu li { 
    padding: 10px; 
} 

#app .dropdown-menu > li > a { 
    color: #FFFFFF; 
}

來源

2014-03-31 Pascal Wagner

你有沒有嘗試在你的CSS中添加某種['float']（http://css.maxdesign.com.au/floatutorial/）屬性以及相關的鈴聲_selector（s）_？ – summea

是的，不幸的是沒有工作。 –

提供一個jsFiddle或jsBin，它會讓我們更容易找出問題所在。 – Kehlan

如果沒有jsfiddle或gist設置來查看，有點難以分辨，但有幾件事情可以讓鐘形圖和頭像對齊。正如Summea上面提到的，你可以嘗試添加一個float財產的鐘聲。

另一個可能的選擇是在您的dropdown-toggle<div>上設置display: inline-block;。由於鈴聲是圖片/圖標，並且默認屬性爲inline-block，因此應該可以幫助他們對齊。

小建議：用<img>元素替換<i>。我還建議把代碼扔到主要/小提琴上 - 其他人可能能夠提供比我更好的答案。 :)

來源

2014-03-31 22:33:53 jennz0r

<div class="navbar-container"> 
    <div class="something col-0"> 
     <h1> 
      <a class="tributr-logo" href="{{pathFor 'stream'}}">Tributr </a><small class="tributr-logo">(Private Beta)</small> 
     </h1> 
    </div>   
    <div class="something col-1"> 
     <a style="color: #FFFFFF"><i class="fa fa-bell fa-2x"></i></a> 
    </div> 
    <div class="something col-2"> 
     <div class="dropdown-toggle" data-toggle="dropdown">    
      <img class="navbar-photo" src="{{currentUser.profile.avatarURL}}" /> 
      {{currentUser.profile.firstName}} {{currentUser.profile.lastName}}  
      <div class="settings pull-right"><i class="fa fa-sort-asc fa-2x"></i></div> 
     </div> 
    </div> 
    <div class="something col-3"> 
     <ul class="dropdown-menu col-md-2"> 
      <li><a href="{{pathFor 'profile'}}">Settings</a></li> 
      <li><a data-action="logout">Logout</a></li> 
     </ul> 
    </div> 
    <div class="clear"></div> 
</div> 

then the style 

<style> 
    .navbar-container { 
     margin:0; 
     padding:0; 
     height: 
     width: 
    } 
    .something { 
     float:left; 
     height: 
    } 
    .clear { 
     clear:both 
    } 

    .col-0 { 
     width: 
    } 

    .col-1 { 
     width: 
    } 

    .col-2 { 
     width: 
    } 

    .col-3 { 
     width: 
    } 
</style>

來源

2014-03-31 22:34:53

不能讓我的導航欄，以正確對齊

回答

相關問題