尝试将我的订阅按钮放在表单底部

Question

我已经编写了一些CSS代码，所有内容在桌面上看起来都不错，但在移动设备上一切都很好，除了“订阅”按钮，该按钮最终不在表单底部，而是在多项选择题的底行。

.vertical-center {
  margin: 0;
  position: relative;
  top: 65%;
  left: 35%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 992px){
  #mcemail {
  width: 100%;
  }
}

<div class="container" id="mcemail"> 
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <p>
    <label>First Name</label>
    <input type="text" name="FNAME" placeholder="first name"
    required="">
</p>
<p>
    <label>Last Name</label>
    <input type="text" name="LNAME" placeholder="last name"
    required="">
</p>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
              <p>
    <label>Email address: 
        <input type="email" name="EMAIL" placeholder="Your email address" required />
</label>
</p>  
              <p>
    <label>Which List to signup for</label>
    <label>
        <input name="_mc4wp_lists[]" type="checkbox" value="Cotacachi"> <span>Cotacachi</span>
    </label>
        <input name="_mc4wp_lists[]" type="checkbox" value="Quito"> <span>Quito</span>
    </label>
    <label>
    <label>
        <input name="_mc4wp_lists[]" type="checkbox" value="Delivery (Cuenca, Olon, Manta, Puerto Lopez, Puerto Cayo, Bahia, Crucita, Ayampe)"> <span>Delivery (Cuenca, Olon, Manta, Puerto Lopez, Puerto Cayo, Bahia, Crucita, Ayampe)</span>
    </label>
</p>
            </div>
        </div>
    </div>
<div class="vertical-center">
    <input type="submit" id="mc-subscribe" value="Subscribe">
  </div>

Answer 1

试试这个：

<div class="container" id="mcemail">
    <form class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div>
                <label>First Name</label>
                <input type="text" name="FNAME" placeholder="first name" required="">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" name="LNAME" placeholder="last name" required="">
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div>
                <label>Email address:
                    <input type="email" name="EMAIL" placeholder="Your email address" required />
                </label>
            </div>
            <div>
                <label>Which List to signup for</label>
                <label>
                    <input name="_mc4wp_lists[]" type="checkbox" value="Cotacachi"> <span>Cotacachi</span>
                </label>
                <label>
                    <input name="_mc4wp_lists[]" type="checkbox" value="Quito"> <span>Quito</span>
                </label>
                <label>
                    <input name="_mc4wp_lists[]" type="checkbox" value="Delivery (Cuenca, Olon, Manta, Puerto Lopez, Puerto Cayo, Bahia, Crucita, Ayampe)"> <span>Delivery (Cuenca, Olon, Manta, Puerto Lopez, Puerto Cayo, Bahia, Crucita, Ayampe)</span>
                </label>
            </div>
        </div>
        <div class="vertical-center">
            <input type="submit" id="mc-subscribe" value="Subscribe">
        </div>
    </form>
</div>

我稍微清理了一下 HTML，将标签放入其中，并将提交按钮放入表单标签内。