[英]line 3 divs on one line
I am trying to get a mailchimp signup form to be on the same line instead of the default 3 lines. 我正在尝试使mailchimp注册表单位于同一行,而不是默认的3行。
I have tried to add display: inline-block; 我试图添加显示:inline-block; which made no difference and I have also tried to put a container around the divs but that didn't make a difference. 这没有什么区别,我也曾尝试在divs周围放置一个容器,但这没有任何区别。
I do not have much experience of css but I do understand it. 我没有太多的CSS经验,但我确实了解。 I was wondering if someone with a little more experience may be able to help. 我想知道是否有更多经验的人可以提供帮助。
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//digital-realms.us12.list-manage.com/subscribe/post?u=b3dcff09f16684d5f73852c78&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-->
Thank you. 谢谢。
ps: The code came from MailChimp and they set the classes so I do not have any css of my own to include. ps:代码来自MailChimp,它们设置了类,因此我没有自己的CSS。
Use the following html 使用以下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>
You may change the width. 您可以更改宽度。 and insert your html into the content 1, content 2, content 3 并将您的html插入内容1,内容2,内容3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.