【问题标题】:html form full width for select element选择元素的html表单全宽
【发布时间】:2017-05-03 07:18:39
【问题描述】:

我正在尝试设置 (mailchimp) 电子邮件注册表单,并且所有表单元素都应具有全宽。我需要在 html 代码中设置所有样式(外部 css 文件是不可能的)。 我试图让所有元素全宽,但出于任何原因,选择元素和我的按钮没有全宽(但“几乎”全宽)。有人可以解释原因甚至展示如何使这些元素与其他元素大小相同的解决方案吗?

谢谢!

(表格的某些部分是德语。)

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div id="mc_embed_signup_scroll">

<div class="mc-field-group"><label for="mce-EMAIL"><h1>Email</h1></label>
  <input id="mce-EMAIL" class="required email" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;" type="email" name="EMAIL" value="" /></div>

<p><div class="mc-field-group"><label for="mce-SALUTATION"><h1>Anrede</h1></label>
  <select id="mce-SALUTATION" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;" name="SALUTATION">
    <option value=""></option>
    <option value="Frau">Mrs.</option>
    <option value="Herr">Mr.</option>
    </select></div>

<p><div class="mc-field-group"><label for="mce-FNAME"><h1>Vorname</h1> </label>
  <input id="mce-FNAME" type="text" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none;" name="FNAME" value="" /></div>


<div id="mce-responses" class="clear">&nbsp;</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input tabindex="-1" type="text" name="b_8f44437b2b26a07918f0d32dd_afef57f14e" value="" /></div>

<div><input id="mc-embedded-subscribe" class="button" style="width: 100%; padding: 0.5em 0.2em; margin-top: 1.05em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; shadow: none; background: #790000; color: #ffffff;" type="submit" name="subscribe" value="Jetzt Anmelden" /></div>
</div>
</form></div>
<!--End mc_embed_signup-->

【问题讨论】:

    标签: css forms mailchimp


    【解决方案1】:

    <!-- Begin MailChimp Signup Form -->
    <div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="" method="post" name="mc-embedded-subscribe-form" target="_blank">
    <div id="mc_embed_signup_scroll">
    
    <div class="mc-field-group"><label for="mce-EMAIL"><h1>Email</h1></label>
      <input id="mce-EMAIL" class="required email" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;box-sizing:border-box" type="email" name="EMAIL" value="" /></div>
    
    <p><div class="mc-field-group"><label for="mce-SALUTATION"><h1>Anrede</h1></label>
      <select id="mce-SALUTATION" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none; background: #ffffff;box-sizing:border-box" name="SALUTATION">
        <option value=""></option>
        <option value="Frau">Mrs.</option>
        <option value="Herr">Mr.</option>
        </select></div>
    
    <p><div class="mc-field-group"><label for="mce-FNAME"><h1>Vorname</h1> </label>
      <input id="mce-FNAME" type="text" style="width: 100%; padding: 0.5em 0.2em; margin-top: 0.5em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; box-shadow: none;box-sizing:border-box" name="FNAME" value="" /></div>
    
    
    <div id="mce-responses" class="clear">&nbsp;</div>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input tabindex="-1" type="text" name="b_8f44437b2b26a07918f0d32dd_afef57f14e" value="" /></div>
    
    <div><input id="mc-embedded-subscribe" class="button" style="width: 100%; padding: 0.5em 0.2em; margin-top: 1.05em; margin-bottom: 1.5em; line-height: 1.5em; border: 1px solid #606060; shadow: none; background: #790000; color: #ffffff;box-sizing:border-box" type="submit" name="subscribe" value="Jetzt Anmelden" /></div>
    </div>
    </form></div>
    <!--End mc_embed_signup-->

    【讨论】:

    • 问题不在于 。您已经使用了填充,因此使这个 100% 的总宽度增加(100% + 填充)。使用 box-sizing:border-box
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-23
    • 2012-11-22
    • 2021-10-05
    • 2013-06-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多