想要漂浮"订阅"输入字段右侧的按钮

时间:2016-01-10 16:17:20

标签: html css forms field mailchimp

我是HTML / CSS的新手,并且已经花了好几个小时来漂浮"提交"输入表单字段右侧的按钮。我确定这是一个相对简单的解决方案,我似乎无法弄明白。请帮助:)

我附上了我想要的截图。 layout of subscribe button



.footer-wrapper #mc_embed_signup {
	& input {
		background-color: #000;
		border-radius: 3px;
		height: 35px;
		border: none;
		width: 100%;
		}
}

<!-- Begin MailChimp Signup Form -->
				<div id="mc_embed_signup">
				<form action="//methodpgh.us8.list-manage.com/subscribe/post?u=5a5764ee5b831b0dbfd47811f&amp;id=11148dcbc6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
				    <div id="mc_embed_signup_scroll">
					
				<div class="mc-field-group">
					<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address">			<div class="clear submit-btn"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
				</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;" aria-hidden="true"><input type="text" name="b_5a5764ee5b831b0dbfd47811f_11148dcbc6" tabindex="-1" value=""></div>
				    
				    
				    </div>
				</form>
				</div>
				
				<!--End mc_embed_signup-->
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

当您不希望元素两侧的内容时,可以使用clear="class"。这个类停止按钮以对齐输入字段的右侧。我确实删除了它,所以它现在正在工作。 :)

.footer-wrapper #mc_embed_signup {
	& input {
		background-color: #000;
		border-radius: 3px;
		height: 35px;
		border: none;
		width: 100%;
		}
}
<!-- Begin MailChimp Signup Form -->
				<div id="mc_embed_signup">
				<form action="//methodpgh.us8.list-manage.com/subscribe/post?u=5a5764ee5b831b0dbfd47811f&amp;id=11148dcbc6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
				    <div id="mc_embed_signup_scroll">
					
				<div class="mc-field-group">
					<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address">			<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
				</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;" aria-hidden="true"><input type="text" name="b_5a5764ee5b831b0dbfd47811f_11148dcbc6" tabindex="-1" value=""></div>
				    
				    
				    </div>
				</form>
				</div>
				
				<!--End mc_embed_signup-->