表单字段未水平对齐

Question

我在使用 mailchimp 表单时遇到一些问题。这是表格的屏幕截图：。

第一个字段未与其他两个字段水平对齐。这是源代码：

<div id="mc_embed_shell">
  
<div id="mc_embed_signup">
    <form action="https://leukemiarf.us6.list-manage.com/subscribe/post?u=87981fffdc6c6d441d84fac52&amp;id=72db48f28f&amp;f_id=004e05e3f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate="">
        <div id="mc_embed_signup_scroll"><h2>Subscribe</h2>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
                       <div class="mc-field-group"><label for="mce-EMAIL">Email address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div><div class="mc-field-group"><label for="mce-group[23937]">What term best describes you? </label><select name="group[23937]" class="" id="mce-group[23937]"><option value=""></option><option value="16">Supporter / donor</option><option value="1">Patient</option><option value="2">Caregiver</option><option value="8">Healthcare professional / social worker</option><option value="4">Researcher</option><option value="32">Event Volunteer</option><option value="32768">Other</option></select></div><div class="mc-field-group"><label for="mce-group[58965]">Primary diagnosis (if patient/caregiver) </label><select name="group[58965]" class="" id="mce-group[58965]"><option value=""></option><option value="2199023255552">Acute lymphoblastic leukemia (ALL)</option><option value="4398046511104">Acute myeloid leukemia (AML)</option><option value="8796093022208">Chronic lymphocytic leukemia (CLL)</option><option value="17592186044416">Chronic myeloid leukemia (CML)</option><option value="35184372088832">Childhood leukemia</option><option value="70368744177664">Other</option><option value="140737488355328">Not applicable</option></select></div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display: none;"></div>
            <div class="response" id="mce-success-response" style="display: none;"></div>
        </div><div aria-hidden="true" style="position: absolute; left: -5000px;"><input type="text" name="b_87981fffdc6c6d441d84fac52_72db48f28f" tabindex="-1" value=""></div><div class="clear"><input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe"></div>
    </div>
</form>
</div>
</div>

有什么想法吗？

我尝试过编辑CSS但没有成功

Answer 1

您可以使用此代码，您需要添加一个容器来包装输入并选择更好的样式并对齐它。如果你想让它响应式，使用网格也更方便

h2{
    text-align: center;
}

.indicates-required{
    padding-bottom: 2vw;
}

.mc_embed_signup_scroll, .indicates-required{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}


.mc-field-group{
    padding-inline: 1vw;
    display: flex;
    flex-direction: column;
    line-height: 1.5rem;
}

.mc-field-group label{
    font-size: clamp(10px,1.5vw,1.5rem);
}

.mc-field-group select, .mc-field-group input {
    height: 100%;
    line-height: 2rem;
    padding: 0;
    margin: 0;
}

    <div id="mc_embed_shell">
        <div id="mc_embed_signup">
            <form action="https://leukemiarf.us6.list-manage.com/subscribe/post?u=87981fffdc6c6d441d84fac52&amp;id=72db48f28f&amp;f_id=004e05e3f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <h2>Subscribe</h2>
                    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
                        <div class="container">    
                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email address <span class="asterisk">*</span></label>
                                <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required value="">
                            </div>
                            <div class="mc-field-group">
                                <label for="mce-group[23937]">What term best describes you? </label>
                                <select name="group[23937]" class="" id="mce-group[23937]">
                                    <option value=""></option>
                                    <option value="16">Supporter / donor</option>
                                    <option value="1">Patient</option><option value="2">Caregiver</option>
                                    <option value="8">Healthcare professional / social worker</option>
                                    <option value="4">Researcher</option><option value="32">Event Volunteer</option>
                                    <option value="32768">Other</option>
                                </select>
                            </div>
                            <div class="mc-field-group">
                                <label for="mce-group[58965]">Primary diagnosis (if patient/caregiver) </label>
                                <select name="group[58965]" class="" id="mce-group[58965]">
                                    <option value=""></option>
                                    <option value="2199023255552">Acute lymphoblastic leukemia (ALL)</option>
                                    <option value="4398046511104">Acute myeloid leukemia (AML)</option>
                                    <option value="8796093022208">Chronic lymphocytic leukemia (CLL)</option>
                                    <option value="17592186044416">Chronic myeloid leukemia (CML)</option>
                                    <option value="35184372088832">Childhood leukemia</option>
                                    <option value="70368744177664">Other</option>
                                    <option value="140737488355328">Not applicable</option>
                                </select>
                            </div>
                        </div>
                        <div id="mce-responses" class="clear">
                            <div class="response" id="mce-error-response" style="display: none;"></div>
                            <div class="response" id="mce-success-response" style="display: none;"></div>
                        </div>
                        <div aria-hidden="true" style="position: absolute; left: -5000px;">
                            <input type="text" name="b_87981fffdc6c6d441d84fac52_72db48f28f" tabindex="-1" value="">
                        </div>
                        <div class="clear">
                            <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>