wordpress 试图使我的订阅按钮在底部的形式

6l7fqoea  于 2023-10-17  发布在  WordPress
关注(0)|答案(1)|浏览(94)

我写了一些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>

see subscribe button here

x7yiwoj4

x7yiwoj41#

试试这个:

<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,把<form>标记放进去,把submit按钮放在form标记里面。

相关问题