导航栏配置文件图像无法正确显示

Question

我正在尝试在我的页面上创建一个Top Navbar，让用户可以在他们的个人资料图片，名称和公司上进行搜索。

我希望设计看起来像下面这样：

   
                                           

任何人都可以指出我正确的方向。

nav {
  background-color: #f9fafd;
}

input[type="text"] {
  border: none;
  background-color: white;
  height: 50px;
  font-size: 14px !important;
}

.input-group-addon {
  background-color: white;
  border: none;
}

nav img {
  float: right;
  height: 50px;
  width: 50px;
  margin-left: 18px;
}

<nav class="navbar navbar-light">
  <div class="nav navbar-nav" style="width: 100%;">
    <div class="input-group mr-auto">
      <span class="input-group-addon"><img src="./assets/images/search-icon.png" style="width: 24px; height: 24px;"/></span>
      <input type="text" class="form-control" placeholder="Search for an Application..." />
    </div>
    <a href="#" class="nav-link">
      <div style="float: left;">
        <span style="display: block;">User Logged In</span>
        <span>Company Name</span>
      </div>
      <img class="img-fluid rounded-circle" src="http://vvcexpl.com/wordpress/wp-content/uploads/2013/09/profile-default-male.png">
    </a>
  </div>
</nav>

Answer 1

＆＃13;

＆＃13;

transitionCoordinator.animate

＆＃13;

＆＃13;

＆＃13;

Answer 2

严格来说，在展示位置和定位方面，以下代码段应演示如何实现预期的最终结果并引导您朝着正确的方向前进。我没有尝试调整任何宽度，因为我相信如果留给你的话会更合适。

宣布了其他CSS规则：

a.nav-link {
  float: right;
}

a.nav-link>div {
  display: inline-block;
}

.input-group.mr-auto {
  display: inline-block;
  vertical-align: top;
}

请注意，float规则的内联样式已从指定元素中删除。

＆＃13;

＆＃13;

nav {
  background-color: #f9fafd;
}

input[type="text"] {
  border: none;
  background-color: white;
  height: 50px;
  font-size: 14px !important;
}

.input-group-addon {
  background-color: white;
  border: none;
}

nav img {
  float: right;
  height: 50px;
  width: 50px;
  margin-left: 18px;
}

a.nav-link {
  float: right;
}

a.nav-link>div {
  display: inline-block;
}

.input-group.mr-auto {
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<nav class="navbar navbar-light">
  <div class="nav navbar-nav" style="width: 100%;">
    <div class="input-group mr-auto">
      <span class="input-group-addon"><img src="./assets/images/search-icon.png" style="width: 24px; height: 24px;"/></span>
      <input type="text" class="form-control" placeholder="Search for an Application..." />
    </div>
    <a href="#" class="nav-link">
      <div>
        <span style="display: block;">User Logged In</span>
        <span>Company Name</span>
      </div>
      <img class="img-fluid rounded-circle" src="http://vvcexpl.com/wordpress/wp-content/uploads/2013/09/profile-default-male.png">
    </a>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试

.input-group {
    float: left;
}