移动端表单Subscribe按钮位置异常问题求助

问题出在你用position: relative加百分比top值定位按钮，这种方式依赖父容器高度，移动端表单列堆叠后高度变化，百分比定位就失效了。调整结构和CSS即可解决：

1. 调整HTML结构 #

把按钮容器移到表单的#mcemail容器内部，放在row之后，让按钮在结构上自然处于表单内容下方：

<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>
                <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>
            </p>
        </div>
    </div>
    <!-- 按钮容器移至此处 -->
    <div class="subscribe-btn-container">
        <input type="submit" id="mc-subscribe" value="Subscribe">
    </div>
</div>

2. 修改CSS样式 #

移除原vertical-center的定位逻辑，改用适配响应式的布局：

/* 桌面端按钮样式：居中对齐，保留间距 */
.subscribe-btn-container {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 992px){
    #mcemail {
        width: 100%;
    }
    /* 移动端调整间距，保持按钮在底部 */
    .subscribe-btn-container {
        margin-top: 1.5rem;
    }
}

核心逻辑 #

• 结构上让按钮属于表单容器的一部分，无论屏幕尺寸如何，按钮都会紧跟表单内容下方排列。
• 用flex布局替代百分比定位，摆脱对父容器高度的依赖，适配不同屏幕的布局变化。
• 通过margin-top控制按钮与表单内容的间距，比定位更灵活可控。

内容的提问来源于stack exchange，提问作者Michael