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

在我的导航栏里，我用float:right将一个搜索字段精确定位在我想要的右角

问题是，我试图使用float:right在搜索栏的左侧添加一个配置文件图片，但这不仅没有将配置文件图片定位在右上角，而且还将我的搜索栏从视觉上撞到导航栏下方的外侧

我猜我不能用float：对；对于这两个元素，我的问题是如何将div nav profile pic嵌套在div head搜索栏中，以便将这两个元素都放置在右上角

---

如果我找到你，你想让导航和搜索栏对齐吗？只需创建一个container div并浮动容器

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

---

您的搜索栏被推出，因为容器的宽度不足以容纳它

让我们把它分解成一个简单的例子

这是一个简单的破损布局。运行代码段以查看结果：

标题{ 高度：100px； 背景：2000人； 填充：50px； 字号：2em； } 导航， .搜索{ 高度：100px； 宽度：220px； 背景：F00； 浮动：对； 利润率：0.5px； } 导航 搜索

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