Html 在同一行上渲染元素，输入元素占用所有可用空间

我希望图标、

输入

和

按钮

是内联的

由于

显示：内联块

，因此

输入的宽度减小

我尝试过绝对定位按钮，并将相对位置添加到外部div，或浮动输入和按钮，但到目前为止没有任何效果

我非常感谢你的帮助。提前谢谢

下面是我的代码结构


。首先{
边框：1px纯红；
填充：10px 15px；
}
我{
右边距：19px；
颜色：紫色；
}
.第三{
显示：内联块；
}
输入{
宽度：100%；
}
.第四{
浮子：对！很重要；
}

；
点击
使用
float:left
并添加
clear:both
div

了解flexbox。保持简单：


。首先{
显示器：flex；
边框：1px纯红；
填充：10px 15px；
}
输入{
flex:1；/*告诉input使用该行上的所有可用空间*/
}
我{
右边距：19px；
颜色：紫色；
}

；
点击
谢谢！由于我无法简化代码的结构，我最终做了如下工作：