Question

我在使用表单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％。

为了解决这个问题，我通常会将此代码放在实际网站上，但我无法访问此网络中的常用网站，对此抱歉。

非常感谢任何帮助。

Answer 1

给它的父级（form#newsletter）一个最小宽度，当屏幕尺寸小于该大小时，将出现滚动条。

#newsletter { min-width: 300px; } /*adjust to your needs */

Answer 2

它下面是因为它浮动了。

您已为width和input修正了button，因此您可以为容器设置min-width：

#footer-newsletter form {
   min-width:295px;
}

示例 http://jsfiddle.net/zX3F4/1/

调整大小时表单btn移动的CSS问题

2 个答案: