请问为啥搜索按钮被挤出红框外面？

红框宽度是296，文本框的宽度是244，设置了inline-block 为啥宽度40的搜索按钮都会被挤走呢，按道理50都放得下？

因为你放按钮的这个div标签他默认是一个块元素(display: block;)，他是独占一行的，无论他宽度多大多小都独占一行。
我给你两个解决方案

1. 你可以把这个放按钮的div和上面那个div一样转换成内联块元素(display: inline-block;)
2. 也可以给form标签加上display: flex;

看看form标签的大小呢

试一下，在设置40宽那行加入float：left
检查搜索按钮的div有没有margin