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，因为您已将文本字段和按钮放在两个div中

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

如何使文本字段和提交按钮水平显示？

5 个答案: