无法使我的导航栏正确对齐

Question

Here is what my navbar looks like...

I can't get the bell to sit just to the left of the profile picture....

Here is my 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>

Here is my 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;
}

Answer 1

It's a bit hard to tell without a jsfiddle or gist set up to take a look, but there are a few things you can likely do to have the bell image and avatar align. As Summea mentions above, you can try adding a float property to the bell.

Another likely option is setting display: inline-block; on your dropdown-toggle <div> . Because the bell is an image/icon and has a default property of inline-block , that should help them align.

Tiny suggestion: replace <i> with <img> elements. I'd also recommend throwing the code onto a gist/fiddle - other people may be able to provide better answers than mine that way. :)

Answer 2

<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>