css - 为什么我不能将我的图像和搜索栏放在导航栏的右侧？

Question

在我的导航栏中，我使用 float: right 将搜索字段精确定位在右 Angular 我想要的位置；

问题是我尝试在搜索栏左侧添加个人资料图片(也是使用float:right)，但这不仅没有将个人资料图片定位在右上角，而且还敲了我的搜索栏视觉上位于导航栏之外(在其下方)。

我猜我不能使用 float: 对；对于这两个元素，所以我的问题是如何使用 div nav(个人资料图片嵌套在里面)和 div head-search(搜索栏)将它们都放在右上角？

http://codepen.io/donnaloia/pen/hlEjs

  nav {
  float: right;
  width:13em;
  margin:10px auto;
  background:#f6f6f6;
  border-radius: 50px;
  box-shadow: 0 0 4px rgba(0,0,0,.15);
}

.user-avatar img{
        border-radius: 50px;
        float:right;
        margin-left:200px;
        margin-top:1px;
        width: 30px;
        height: auto;
}

#head-search        {float:right; width:350px;}
#head-search span   {float:right; color: #008000; font:normal 12px/46px 'Strait',sans-serif;}

Answer 1

如果我明白了，您希望导航栏和搜索栏正确对齐吗？只需创建一个容器 div 并 float 容器。

div id="navsb-container">
div id="nav"></div>
div id="sb"></div>
</div>


#navsb-container{
clear:both;
float:right;
width:80%;
display:block;
}

#nav{
float:left;
display:inline-block;
position:relative;
width:39%;
}

#sb{
float:right;
display:inline-block;
position:relative;
width:49%;
}