同じ行に入力ボックスとサブミットボックスを入力しようとしています

Question

この質問はたくさん頼まれていますが、私はコーディングで完全な初心者です。

私はワードプレスのフッターにメールの購読ボックスを追加しています。私は書式設定などに合わせて裸のバージョンをどのように顧客に提供するかについての指示に従ってきた。

最終的な部分は、ページの一番下の1行に3つのボックスをすべて取得することです。私はちょうどそれの周りに私の頭を得ることができません。

助けてください！

#mailchimp { 
 
    background: #F7C6CB; 
 
    color: #3D6392; 
 
    padding: 10px 7px; 
 
} 
 

 
#mailchimp input { 
 
    border: medium none; 
 
    color: #444; 
 
    font-family: architects daughter; 
 
    font-size: 0.7rem; 
 
    font-style: italic; 
 
    margin-bottom: 2px; 
 
    padding: 2px 2px; 
 
    width: 300px; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 

 
#mailchimp input.email { 
 
    background: #fff 
 
} 
 

 
#mailchimp input.name { 
 
    background: #fff 
 
} 
 

 
#mailchimp input[type="submit"] { 
 
    background: #BBD8DC; 
 
    color: #444; 
 
    cursor: hand; 
 
    font-size: 0.7rem; 
 
    width: 100px; 
 
    padding: 4px 0; 
 
} 
 

 
#mailchimp input[type="submit"]:hover { 
 
    color: #ffff 
 
}

<div id="mailchimp"> 
 

 
    <form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> 
 

 
    <input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 

 
    <input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 

 

 

 
    <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 class="clear"> 
 
     <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
 
    </div> 
 

 

 
    </form> 
 
</div>

Answer 1

私はあなたのコードを少し周りを果たしました。 input submitの周りのclearクラスを削除し、inputの下の検証divを移動しました。また、入力のwidthを減らして、1行に並べて並べるのに十分なスペースがあることを確認しました。上にそれらを強制するために、テキスト入力とも提出入力の両方にスタイル：私は「インライン・ブロック表示」を追加

#mailchimp { 
 
    background: #F7C6CB; 
 
    color: #3D6392; 
 
    padding: 10px 7px; 
 
} 
 

 
#mailchimp input { 
 
    border: medium none; 
 
    color: #444; 
 
    font-family: architects daughter; 
 
    font-size: 0.7rem; 
 
    font-style: italic; 
 
    margin-bottom: 2px; 
 
    padding: 2px 2px; 
 
    width: 200px; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 

 
#mailchimp input.email { 
 
    background: #fff 
 
} 
 

 
#mailchimp input.name { 
 
    background: #fff 
 
} 
 

 
#mailchimp input[type="submit"] { 
 
    background: #BBD8DC; 
 
    color: #444; 
 
    cursor: hand; 
 
    font-size: 0.7rem; 
 
    width: 100px; 
 
    padding: 4px 0; 
 
} 
 

 
#mailchimp input[type="submit"]:hover { 
 
    color: #ffff 
 
}

<div id="mailchimp"> 
 

 
    <form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> 
 

 
    <input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 

 
    <input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 

 
     <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
 

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

 

 
    </form> 
 
</div>

Answer 2

：この結果を参照してください以下のコードを実行します。同じ行。私はまた、div.clearから送信入力を移動し、それを同じ行に入れることを可能にする電子メール入力の直下に置きました。

#mailchimp { 
 
    background: #F7C6CB; 
 
    color: #3D6392; 
 
    padding: 10px 7px; 
 
} 
 

 
#mailchimp input { 
 
    border: medium none; 
 
    color: #444; 
 
    font-family: architects daughter; 
 
    font-size: 0.7rem; 
 
    font-style: italic; 
 
    margin-bottom: 2px; 
 
    padding: 2px 2px; 
 
    width: 300px; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    display: inline-block; 
 
} 
 

 
#mailchimp input.email { 
 
    background: #fff 
 
} 
 

 
#mailchimp input.name { 
 
    background: #fff 
 
} 
 

 
#mailchimp input[type="submit"] { 
 
    background: #BBD8DC; 
 
    color: #444; 
 
    cursor: hand; 
 
    font-size: 0.7rem; 
 
    width: 100px; 
 
    padding: 4px 0; 
 
    display: inline-block; 
 
} 
 

 
#mailchimp input[type="submit"]:hover { 
 
    color: #ffff 
 
}

<div id="mailchimp"> 
 

 
    <form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> 
 

 
    <input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 

 
    <input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 

 
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
 

 
    <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 class="clear"> 
 
     
 
    </div> 
 

 

 
    </form> 
 
</div>

Answer 3

わかりましたので、私はちょうど<input>ブロックの親divを作成し、その後、私は左と右のdivを浮かべた後、20ピクセルの高さを持つように#MailChimp CSSスタイルを変更しました。ここに私ですJSFiddle