Question

我正在建立一个即将推出的网站，它目前正在托管here，但我无法正确对齐该按钮。我希望它与文本字段的右侧对齐。我怎么能这样做？

我目前的代码是：

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
                      <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
                            <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
                      </div>
                      <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
     </form
   </div>
 </div>
</div>

注意：我正在使用bootstrap。

Answer 1

在button div。

中包含form-group标记

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
                      <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                            <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
                            <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
                            <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
                      </div>

     </form
   </div>
 </div>
</div>

Answer 2

你可以尝试将其添加到按钮：

position: absolute;
right: aaapx;

右边的

添加你要在那个位置修复的号码。

Answer 3

添加此样式：

#mc_embed_signup_scroll > .form-group {
    display: inline-block;
}
#mc_embed_signup_scroll > button {
    float: right;
}

或试试这个：

<div id="mc_embed_signup_scroll">
    <div class="col-md-8">
        <div class="form-group" style="width: auto;">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" name="EMAIL" class="form-control transparent" placeholder="Your email here...">
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
        </div>
    </div>
    <div class="col-md-4">
        <button type="submit" class="btn btn-danger btn-fill">Notify Me</button>
    </div>
</div>

Answer 4

我认为你可以这样做：

<div class="row">
 <div class="col-md-4 col-md-offset-4 col-sm6-6 col-sm-offset-3 ">
   <form action="//joghr.us12.list-manage.com/subscribe/post?u=0afaeb9185d575ddab99c7992&amp;id=2e27b33636" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
           <div class="form-group" style="width:auto; float:left;">
             <label class="sr-only" for="exampleInputEmail2">Email address</label>
               <input type="email" name = "EMAIL" class="form-control transparent" placeholder="Your email here...">
               <div style="position: absolute; left: -10000000px;top: -43px;float: top;overflow: auto;" aria-hidden="true"><input type="text" name="b_0afaeb9185d575ddab99c7992_2e27b33636" tabindex="-1" value=""></div>
           </div>
           <button type="submit" class="btn btn-danger btn-fill" style="float:left">Notify Me</button>
     </form
   </div>
 </div>
</div>

嗯，我认为你会这样做，但那些＆＃39;风格＆＃39;可以在css样式表中正确创建属性。

Answer 5

只需将您的按钮插入另一个带有form-group类的div中，然后添加额外的'text-right'类，使其中心对齐...希望这就是您想要的...看看代码下面...

        <div class="form-group  text-right">
                  <button type="submit"

class =“btn btn-danger btn- 填写“＆gt;通知我

     </div>

对齐按钮（中间右侧）

5 个答案: