Question

我正在尝试将mailchimp注册表单放在同一行而不是默认的3行。

我试过添加display：inline-block;这没有任何区别，我也试图在div周围放一个容器，但这并没有什么不同。

我对css的经验不多，但我确实理解。我想知道有经验的人是否能够提供帮助。

    <!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//digital-realms.us12.list-manage.com/subscribe/post?u=b3dcff09f16684d5f73852c78&amp;id=af1750ad39" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

<div>Sign up to free e-Mail alerts for the latest news, offers & more: </div>
<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</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>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_b3dcff09f16684d5f73852c78_af1750ad39" tabindex="-1" value=""></div>
    <div class="clear opt-in" "><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

谢谢。

ps：代码来自MailChimp，他们设置了类，所以我没有自己的css包含。

Answer 1

使用以下html

.parent {
  width: 100%;
}
.block1 {
  width: 30%;
  float: left;
  padding-right: 10px;
}

.block2 {
  width: 30%;
  float: left;
  padding-right: 10px;
}
.block3 {
  width: 30%;
  float: left;
}

<div class="parent">
  <div class="block1">Content 1</div>
  <div class="block2">Content 2</div>
  <div class="block3">Content 3</div>
</div>

您可以更改宽度。并将您的html插入内容1，内容2，内容3

第3行div在一行上

1 个答案: