导航栏个人资料图片显示不正确

Question

I am trying to create a Top Navbar on my page which lets the user search with a display on their profile image, name and company. 我正在尝试在我的页面上创建一个“顶部导航”栏，该栏允许用户搜索其个人资料图片，姓名和公司信息。

I want the design to look something like below: 我希望设计如下所示：

Could anyone point my in the right direction. 谁能指出我的正确方向。

 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

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span> Company Name </span></a></li> <li><a href="#"><span> User LoggedIn </span></a></li> <li><a href="#"><span><img class="img-fluid rounded-circle" src="https://i.pinimg.com/originals/7c/c7/a6/7cc7a630624d20f7797cb4c8e93c09c1.png" style="width: 25px; height: 25px;"></span></a></li> </ul> <form class="navbar-form navbar-left"> <div class="input-group input-sm" style="width: 400px;"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div> </nav> <div class="container"> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div> </body> </html>

Answer 2

Strictly in terms of placement and positioning, the below code snippet should demonstrate how to achieve your intended end result and steer you in the right direction. 严格按照放置和定位的方式，下面的代码段应演示如何实现预期的最终结果并引导您朝着正确的方向发展。 I have made no attempt at adjusting any widths as I believe this would be better suited if left up to you. 我没有尝试调整任何宽度，因为我相信如果任您选择，这会更适合。

Additional CSS Rules Declared: 已声明的其他CSS规则：

a.nav-link {
  float: right;
}

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

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

Note that inline styles for float rules have been removed from for given elements. 请注意，已从给定元素中删除了float规则的内联样式。

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

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

Answer 3

Try 尝试

.input-group {
    float: left;
}

导航栏个人资料图片显示不正确

问题描述

3 个解决方案

解决方案1
0 2017-10-16 11:58:37

解决方案2
0 已采纳 2017-10-16 12:01:14

解决方案3
-1 2017-10-16 11:45:54

导航栏个人资料图片显示不正确

问题描述

3 个解决方案

解决方案1 0 2017-10-16 11:58:37

解决方案2 0 已采纳 2017-10-16 12:01:14

解决方案3 -1 2017-10-16 11:45:54

解决方案1
0 2017-10-16 11:58:37

解决方案2
0 已采纳 2017-10-16 12:01:14

解决方案3
-1 2017-10-16 11:45:54