html - CSS 导航栏图像问题

Question

我刚刚对我的导航栏进行了一些测试，当我想在用户名之前放置一个图像时，发生了这种情况。我真的不知道是什么问题，我通常做服务器端脚本而不是这些设计。下拉菜单上的这个active类，按计划是要和图片连在一起的，但实际上只去了一半。如果有人可以举例说明我可以在我的 CSS 文件中放些什么，因为问题就在这里。 Here is the image

.navbar-image {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    left: -19px;
    border-radius: 50%;
}

.nav-img {
    position: relative;
    padding-left: 50px;
}

    <li class="dropdown">
        <a href="#" class="dropdown-toggle nav-img" data-toggle="dropdown" role="button" aria-expanded="false">
          <img src="/uploads/avatars/{{ Auth::user()->avatar }}" class='navbar-image'> 
          {{ Auth::user()->name }} <span class="caret"></span>
        </a>
      <ul class="dropdown-menu">
        <li><a href="/posts"><i class='fa fa-btn fa-sticky-note'></i>Posts</a></li>
        <li><a href="/profile"><i class='fa fa-btn fa-user'></i>Profile</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Log out</a></li>
      </ul>
    </li>

Answer 1

尝试

.dropdown, .dropdown-toggle, .dropdown-menu {
    display: inline-block;
}

.dropdown-toggle, .dropdown-menu {
    float: right;
}

.navbar-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}