如何使文本字段和提交按鈕水平顯示？

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

如果你想顯示輸入&提交在同一行

使用float CSS選項

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

    } 

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

檢查了這一點

我希望它能夠幫助

Answer 2

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

Answer 3

如果使用float:left;他們會坐在對方

例如旁邊：

input {float:left;} 

Answer 4

考慮清理你的html。
我做了一點，並得到了這個工作，增加了一個#mc-embedded-subscribe-form{display:inline;}並刪除了我認爲對你的目標毫無用處。

現在，因爲你需要，你可以調整的代碼中，重要的是表單元素保持在一起，並賦予形式的display:inline;財產

here is your updated fiddle

Answer 5

添加這個CSS，因爲你已經把文本框和按鈕in two divs

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