Html 展开导航栏后CSS对齐

有人能帮我对齐图标旁边的搜索栏吗？这就是目前的情况

在扩展之前：

扩展后：

我想有我的搜索栏旁边我的形象后，扩大，有人可以帮我在这里吗？谢谢

函数myFunction{ var x=document.getElementByIdmyTopnav； 如果x.className==topnav{ x、 className+=响应性； }否则{ x、 className=topnav； } } 托普纳夫先生{ 背景色：透明； } .topnav a{ 显示：内联块； 颜色：黑色； 填充：14px 16px； 文字装饰：无； 字体大小：16px； } .topnav.icon{ 显示：无； } .下拉列表{ 浮动：对； 垫面：5px； } 呵呵{ 浮动：对； 垫面：5px； } .下拉菜单{ 字号：17px； 边界：无； 大纲：无； 颜色：黑色； 填充：14px 16px； 背景色：继承； 字体家族：继承； 保证金：0； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：f9f9f9； 最小宽度：160px； 盒影：0px 8px 16px 0px rgba0,0,0,0.2； z指数：1； } .下拉内容a{ 浮动：无； 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； 文本对齐：左对齐； } .topnav a:悬停， .dropdown:悬停.dropbtn{ 背景色：透明； 颜色：天蓝色； } .下拉列表内容a：悬停{ 背景色：ddd； 颜色：黑色； } .下拉：悬停.下拉内容{ 显示：块； } @媒体屏幕和最大宽度：900px{ .topnav a:不是：第n个孩子-n+2， .下拉菜单{ 显示：无； } .topnav a:不：n-儿童-n+2， 呵呵{ 显示：无； } .topnav a.icon{ 浮动：对； 显示：块； } } @媒体屏幕和最大宽度：900px{ .topnav{ 位置：相对位置； } .topnav.responsive.icon{ 位置：绝对位置； 右：0； 排名：0； } .topnav.a{ 浮动：无； 显示：块； 文本对齐：左对齐； } .topnav.responsive.下拉列表{ 浮动：无； } .topnav.responsive.hehe{ 浮动：无； } .topnav.responsive.下拉列表内容{ 位置：相对位置； } .topnav.responsive.dropdown.dropbtn{ 显示：块； 宽度：100%； 文本对齐：左对齐； } .topnav.responsive.hehe{ 显示：块； 宽度：100%； 文本对齐：左对齐； } } 类别 尝试添加，位置：相对；导航，绝对搜索功能

你有密码笔

尝试添加，位置：相对；导航，绝对搜索功能

---

你有密码笔

您好-我已经将您发布的代码完全按照您编写的方式放入堆栈片段中，但是正如您所看到的，它的行为与本文中所描述的一样。你能不能编辑你问题中的片段，让它说明问题？更新了@BillyNoaht这更好，但我们仍然看不到你的图像。既然这是一个重要的元素，并且您希望与之保持一致，那么您可以编辑代码以包含一个有效的图像链接吗？另外，不要吹毛求疵，但请停止在你的文章中添加长行点。我无法保存我的编辑。它说了太多的代码，这就是为什么我要添加点x：也许你应该在meta上发布关于这一点的信息——我从来没有听说过这么说太多代码或者阻止你保存帖子Hello——我已经将你发布的代码完全按照你写的方式放入堆栈片段中，但正如你所看到的，它的行为确实与帖子中所描述的一样。你能不能编辑你问题中的片段，让它说明问题？更新了@BillyNoaht这更好，但我们仍然看不到你的图像。既然这是一个重要的元素，并且您希望与之保持一致，那么您可以编辑代码以包含一个有效的图像链接吗？另外，不要吹毛求疵，但请停止在你的文章中添加长行点。我无法保存我的编辑。它说了太多的代码，这就是为什么我要添加点x：也许你应该在meta上发布关于这一点的信息-我从来没有听说过这么说太多代码或者阻止你保存帖子。它现在就在旁边，但它会弄乱其他内容是的，现在你添加了Js，我可以看到它只是编辑了答案，让我知道新的解决方案是否对你有帮助现在它还在旁边，但它会弄乱其他内容是的，现在你添加了Js我可以看到它刚刚编辑了答案，让我知道新的解决方案是否对你有帮助

.topnav{
  position: relative;
}

.searchFeature{
  position: absolute;
  top: 15px;
  left: 65px;
}