Question

我只是在使用导航栏进行一些测试，当我想在用户名之前插入图像时，就会发生这种情况。我真的不知道是什么问题，我通常做服务器端脚本但不是这些设计。按计划，下拉菜单上的这个活动类需要与图像一起，但实际上只有一半。如果有人可以举例说明我可以把什么东西放在我的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%;
}

Answer 2

以下是菜单图片的修正：

.dropdown { position: relative; }
.navbar-image {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 10px; /*** Set value as per your required ***/
    right: 10px; /*** Set value as per your required ***/
    border-radius: 50%;
}

Answer 3

试试这段代码：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 5px;
}

＆＃13;

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
          <img src="//placehold.it/80x80/?text=%20" class='navbar-image'>
          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="#"><i class="fa fa-btn fa-sign-out"></i>Log out</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

＆＃13;

CSS导航栏图像问题

3 个答案: