如何在 MailChimp 的同一行上获取电子邮件输入和提交按钮?
Posted
技术标签:
【中文标题】如何在 MailChimp 的同一行上获取电子邮件输入和提交按钮?【英文标题】:How do I get email input and submit button on same line in MailChimp? 【发布时间】:2014-04-10 15:53:32 【问题描述】:我试图让“电子邮件”输入和“提交”按钮位于同一行。这是它的样子:
所以它应该看起来像这样(关于布局):
您可以在此处查看实际页面:http://www.grainbeast.com/free-goods/
你能告诉我如何做到这一点吗?
【问题讨论】:
请提供 html 和 CSS。 【参考方案1】:这是我的解决方案:
https://jsfiddle.net/00adpdb1/
只需用“overflow:hidden”包装您的输入,然后用“floar:right”拉到右侧按钮
*
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
input display: block;
width: 100%;
height: 36px;
padding: 6px 14px;
font-size: 14px;
line-height: 1.57142857;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #cfd3cc;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
margin: 0;
.btn
display: block;
padding: 6px 14px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.57142857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
background-clip: padding-box;
border: 1px solid transparent;
border-radius: 2px;
background:red;
color: #fff;
.pull-right
float:right;
.s-margin-left
margin-left: 10px;
<div class="form-group">
<button class="pull-right btn btn-lg btn-primary s-margin-bottom s-margin-left" type="submit">send</button>
<div style="overflow: hidden;">
<input type="email" class="form-control" placeholder="Enter E-mail" value="" id="email" name="email">
</div>
</div>
【讨论】:
【参考方案2】:将以下css添加到style.css
#mc4wp-form-1 > input[type="email"]
display: inline-block;
并删除
float: left
来自提交按钮样式,因此 html 读取
<input type="submit" value="Get Free Access" />
【讨论】:
以上是关于如何在 MailChimp 的同一行上获取电子邮件输入和提交按钮?的主要内容,如果未能解决你的问题,请参考以下文章