我的网站上有一个表格。 该表单由一个电子邮件输入字段和一个“提交”按钮组成。 字段和按钮在同一行上。 按钮在右边，字段在左边，它们之间不应有任何空格。 我想要按钮宽度固定，这样它不会变得比它里面的文本小。 但是，如果浏览器窗口变小，电子邮件输入字段就会变小，这很好。
我遇到的问题是，当浏览器窗口变小时，按钮会跳下一行，因为输入字段会将其下推。 我想以某种方式将输入字段的宽度设置为100%减去按钮的宽度。 这样他们就会一直站在同一条线上。
到目前为止，我已经尝试过了:
.form {
}
.button_submit {
float: right;
width: 78px;
position: relative;
height: 33px;
}
.mail_input {
float: left;
width: 70%;
position: relative;
}
您可以使用flexbox来轻松处理类似的事情，而不是float。 我在JSFiddle上使用Flexbox为您制作了一个解决方案:https://jsfiddle.net/dvsq1ctp/148/
基本的秘诀是在flex-flow上设置nowrap，这样元素就永远不会换行。
