2016-12-17 3 views
0

Я пытаюсь установить формуляр электронной почты (mailchimp), и все элементы формы должны иметь полную ширину. Мне нужно установить весь стиль внутри html-кода (внешний файл css невозможен). Я пытаюсь получить все элементы на всю ширину, но по какой-либо причине элемент select и моя кнопка не имеют полной ширины (но «почти» полной ширины). Может кто-нибудь объяснить причину или даже показать решение о том, как получить эти элементы того же размера, что и остальные?html form full width для select element

Спасибо!

(Некоторые части формы находятся на немецком языке.)

<!-- 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-->

ответ

0

<!-- 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-->

+0

проблема не с . Вы использовали padding, поэтому увеличение этой 100% общей ширины (100% + дополнение). использовать размер окна: рамка –