0

ニュースレター フィールドとボタンを Web サイトに埋め込んだところです。フィールドはうまく配置されていますが、ボタンが低すぎます。さまざまなスタイルを試しましたが、何もうまくいかないようです。

http://www.pazzle.co.uk/

バナーのすぐ下です。

   <!-- Begin MailChimp Signup Form -->

    <div id="mc_embed_signup">
    <form action="http://pazzle.us6.list-manage.com/subscribe/post?u=7167bf73b26b7bd1298d4f925&amp;id=a48b73e435" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <div class="clear">
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </div>
    </form>
    </div>

    <!--End mc_embed_signup-->

#mce-EMAIL {float:left;}
#mc-embedded-subscribe {}
/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display:block;   }
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both;  background-color: #aaa; border-radius:4px; color: #FFFFFF; cursor: pointer;  font-size:15px; font-weight: bold; line-height: 28px;  padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline; float:left;}

#mc_embed_signup input.email {display:block; padding: 5px 0;  text-indent: 8px; width: 120px !important; margin-left: 13px;margin-top: 5px; float:left;}
#mc_embed_signup input.button {display:block;   min-width: 50px; height: 28px; margin-top: 5px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
#mc_embed_signup {float:left; height: 30px;}
4

3 に答える 3

0

div とtextboxに追加float: leftしてみてください#mc_embed_signup .clear#mc_embed_signup input.email

于 2012-10-20T04:58:16.437 に答える
0

問題は CSS にあります。

#mc_embed_signup .buttonstylesheets.css の 1176 行目

clear:bothそのクラスから を取り除くと、フォーム フィールドに合わせて送信ボタンが表示されます。そこから、マージン/ポジショニングを修正できるはずです。

clear:both は基本的に、要素が他の要素とインラインになることを防ぎます。フロートをクリアして、別の要素の隣にフロートできないようにします。

于 2012-10-20T05:01:44.613 に答える
0

これがまさにあなたが話していることかどうかはわかりませんが、 #mc_embed_signup .clear { float: right;} を追加しました。これにより、送信ボタンがフォームボックスに配置され、位置を使用して配置を特定できます:相対

于 2012-10-20T05:02:01.543 に答える