Html 无法使我的搜索图标位于搜索文本区域旁边

我相信这是件简单的事情，但我已经精疲力尽了。我尝试了很多不同的变体，但我就是无法让搜索按钮与搜索栏位于同一行。我束手无策。为什么他们在两条不同的线上

.货柜内{ 宽度：100%； 位置：相对位置； 显示器：flex； } 搜索栏{ 宽度：90%； 边框：2个实心fff200； 边界权：无； 填充物：5px； 高度：40px； 边界半径：5px 0 5px； 大纲：无； 颜色：9DBFAF； } 搜索栏：焦点{ 颜色：黑色； } .搜索按钮{ 宽度：40px； 高度：36px； 边框：2个实心fff200； 背景：灰色； 文本对齐：居中； 颜色：黑色； 边界半径：0 5px 5px 0； 光标：指针； 字体大小：20px； } .搜索按钮：悬停{ 背景：深灰色 } .集装箱{ 宽度：50%； 位置：绝对位置； 最高：20%； 左：50%； 转化：转化-50%，-50%； }

---

尝试更改内部容器的显示属性。输入组显示：flex

.货柜内{ 宽度：100%； 位置：相对位置； 显示器：flex； } 搜索栏{ 宽度：90%； 边框：2个实心fff200； 边界权：无； 填充物：5px； 高度：40px； 边界半径：5px 0 5px； 大纲：无； 颜色：9DBFAF； } 搜索栏：焦点{ 颜色：黑色； } .搜索按钮{ 宽度：40px； 高度：36px； 边框：2个实心fff200； 背景：灰色； 文本对齐：居中； 颜色：黑色； 边界半径：0 5px 5px 0； 光标：指针； 字体大小：20px； } .搜索按钮：悬停{ 背景：深灰色 } .输入组{ 显示器：flex； }

---

您应该使用display flex更改add wrapper，将搜索栏的属性flex设置为1，并删除搜索栏的高度，如下例所示

.货柜内{ 宽度：100%； 位置：相对位置； 显示器：flex； } 搜索栏{ 边框：2个实心fff200； 边界权：无； 填充物：5px； 边界半径：5px 0 5px； 大纲：无； 颜色：9DBFAF； 弹性：1； } 搜索栏：焦点{ 颜色：黑色； } .搜索按钮{ 宽度：40px； 高度：36px； 边框：2个实心fff200； 背景：灰色； 文本对齐：居中； 颜色：黑色； 边界半径：0 5px 5px 0； 光标：指针； 字体大小：20px； } .搜索按钮：悬停{ 背景：深灰色 } .集装箱{ 宽度：50%； 位置：绝对位置； 最高：20%； 左：50%； 转化：转化-50%，-50%； } .输入包装器{ 显示器：flex； }

---

你在搜索栏上的宽度：90%；正在占用太多的空间。90%的父级+它自己的填充留下的小于40px；需要将按钮放在旁边。删除搜索栏的宽度或使其小于70%等

.货柜内{ 宽度：100%； 位置：相对位置； 显示器：flex； } 搜索栏{ 边框：2个实心fff200； 边界权：无； 填充物：5px； 高度：40px； 边界半径：5px 0 5px； 大纲：无； 颜色：9DBFAF； } 搜索栏：焦点{ 颜色：黑色； } .搜索按钮{ 宽度：40px； 高度：36px； 边框：2个实心fff200； 背景：灰色； 文本对齐：居中； 颜色：黑色； 边界半径：0 5px 5px 0； 光标：指针； 字体大小：20px； } .搜索按钮：悬停{ 背景：深灰色 } .集装箱{ 宽度：50%； 位置：绝对位置； 最高：20%； 左：50%； 转化：转化-50%，-50%； }

---

按钮不是一个自动关闭标签，输入错过了/关闭，有一个额外的div标签在里面被关闭，应该在外面。除了这些问题之外，您还可以将display:flex添加到.input组以尝试解决您的问题谢谢，我仍然没有解决按钮问题，但我非常感谢您指出我的疏忽。我在这方面还是新手，所以我犯了很多错误。感谢。使用一些工具来保持代码干净的问题，html验证器是重要的：这不是一个答案，如果你想说这样的话，就把它作为一个评论。