我在让表单 btn 停留在其关联表单输入的右侧时遇到了一些麻烦。当浏览器大小合适时很好，但是，当浏览器缩小时，这个 btn 会移动到输入下方的一行，而不是停留在左侧。我已经尝试了几乎所有我能想到的东西，但是当窗户缩小时我无法阻止它移动。
任何帮助将不胜感激。
这是CSS：
#footer-newsletter form {
display: block;
vertical-align: baseline;
}
#footer-newsletter input {
display: inline;
width: 231px;
height: 19px;
background: #202020;
border:0;
margin:0;
padding:10px;
color: #A5A5A5;
font-size: 0.85em;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
float:left;
border-radius:0
}
#footer-newsletter button {
display: inline;
width:39px;
float:right;
height:39px;
text-indent:-9999em;
background:#202020 url(images/newsletter_arrow.png) no-repeat center center;
border:0;
margin-left:1px;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
}
这是html：
<!-- BEGIN .four columns right #footer-newsletter -->
<div class="four columns right" id="footer-newsletter">
<h3>Newsletter</h3>
<p>Occasional email updates, no spam</p>
<form id="newsletter" method="post" action="http://innervisionsoftware.co.uk/wp-content/plugins/newsletter/do/subscribe.php" onsubmit="return newsletter_check(this)">
<input id="email" type="email" name="newsletter" value="Your email address" required>
<button type="submit">Submit</button>
</form>
</div>
<!-- END .four columns right #footer-newsletter -->
容器只是较大容器的百分比宽度，即 100%。
出于此问题的目的，我通常会将此代码放在实时站点上，但我无法从该网络访问通常的站点，对此感到抱歉。
任何帮助将不胜感激。