Question

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

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

Answer 1

如果没有jsfiddle或gist设置来查看，有点难以分辨，但是有一些事情可以让铃声图像和头像对齐。正如Summea上面提到的，您可以尝试在钟上添加float属性。

另一种可能的选择是在display: inline-block; dropdown-toggle上设置<div>。因为铃是图像/图标并且默认属性为inline-block，所以它应该有助于它们对齐。

微小的建议：将<i>替换为<img>个元素。我还建议将代码放在一个主旨/小提琴上 - 其他人可能能够提供比我更好的答案。：）

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>

无法使我的Navbar正确对齐

2 个答案: