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

如果您想在同一行显示输入并提交

使用floatCSS 选项

   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;属性

这是你更新的小提琴

Answer 5

添加此 CSS，因为您已将文本字段和按钮放在两个 div 中

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