html - 无法让我的导航栏正确对齐

Question

这是我的导航栏的样子......

我无法让铃铛坐在个人资料图片的左侧....

这是我的 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;
}

Answer 1

如果没有设置 jsfiddle 或 gist 来查看，这有点难以判断，但您可以做一些事情来使铃铛图像和头像对齐。正如 Summea 上面提到的，您可以尝试添加一个 float属性给铃。

另一个可能的选项是设置 display: inline-block;在你的 dropdown-toggle <div> .因为铃铛是一个图像/图标并且具有默认属性 inline-block ，这应该有助于他们保持一致。

小建议:替换<i>与 <img>元素。我还建议将代码扔到要点/ fiddle 上——其他人可能能够以这种方式提供比我更好的答案。 :)