html - テキスト フィールドと送信ボタンを水平に表示するにはどうすればよいですか?

Question

ここに jsfiddle があります。質問のタイトルがすべてを示しています: http://jsfiddle.net/aRsS9/

html

<div id="container">
    <div id="top">
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2f/Hermes-product-image.png" alt="" width="180" align="right">
        <h2>Subscribe to Kuzhina Shqiptare</h2>
        <p>How this simple blogpost got 20k hits in only a few days!</p>

        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>

    </div>

    <div id="bottom">
    <center><!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://poezishqip.us6.list-manage.com/subscribe/post?u=335e2f0f30201de23a990ce92&amp;id=3ffd9b18c3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
    <input type="email" style="display: inline;" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email address...">
</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 class="clear"><input type="submit" value="Get instant access" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup--></center>
</div>
</div>

CSS

body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;

    }

    #container {
        width: 600px;
        background: #fff;
    }

    #top {
        padding: 2px 0 0 10px;
    }

    #top h2 {
        color: #b90000;
        font-family: sans-serif;
        line-height: 0;
    }

    #top p {
        font-size: 12px;
        color: gray;
    }

    #top ul {
        padding-bottom: 40px;
    }
    #top ul li {
        list-style-image:url('list.png');
        font-size: 14px;
        padding-bottom: 5px;
    }

    #top img {
        margin-top: 30px;
    }
    #mc_embed_signup {
        background: LightBlue;
    }

    #mc_embed_signup {
        margin: auto;
    }

    input[type=email] {
        width: 30%;
    }

    input[type=submit] {
        width: 30%;
    }

Answer 1

テキストフィールドとボタンを2つのdivに配置したため、このcssを追加します

.mc-field-group {
       width: 30%;
        float:left;}
#mce-responses{
        width: 30%;
    flaot:left;}

Answer 2

#mc-embedded-subscribe-form>div {
display: inline;
}

Answer 3

あなたが使用する場合float:left;、それらは互いに隣り合わせに座ります

例えば：

input {float:left;}