获取更接近输入字段的按钮

Question

我在同一条线上有一个输入和按钮，但它们相隔很远。

我怎样才能让他们更接近？

HTML

<form action="https://moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&amp;id=33b662ad0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div class="input-group"> 
        <input type="email" name="EMAIL" class="form-control" placeholder="Email address" id="mcinputform-front" required autofocus> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit" value="Subscribe" name="subscribe" onClick="ga('send', 'event', { eventCategory: 'SumoMe', eventAction: 'Conversion', eventLabel: 'CTA bottom email signup on bankrupt footballers page'})";>Subscribe!</button>
                    <input id="group_32" style="display: none;" checked="checked" name="group[12353][32]" type="checkbox" value="1" />
                    <input id="group_4194304" style="display: none;" checked="checked" name="group[12353][4194304]" type="checkbox" value="1" /><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
            </span>
    </div>
</form> 

CSS：

#signupform-front {
    background-color: lightgray;
    padding-bottom: 1%;
}
#signupinput-front {
    display: block;
    text-align: center;
    max-width: 50%;
}
#mcsignupbutton-front {
    width: 10%;
    text-align: center;
    float: right;
}
#mcinputform-front {
    max-width: 50%;
}

Check it here

Answer 1

尝试添加以下CSS。

顶级类将使它们包含100％的div然后你可以控制每个元素的大小，减少它将把它放在一行上。最后一个类将添加按钮左侧的间距。

＆＃13;

＆＃13;

.input-group {
  width: 100%;
}

.input-group .form-control {
  width: 20%;
}

.btn-default {
  margin-left: 2%
}

＆＃13;

＆＃13;

＆＃13;