Ninja Forms - 对齐文本区域和提交按钮

Question

我只是使用Ninja Forms Wordpress插件在我的网站上添加了一个简单的电子邮件订阅表单。提交按钮位于文本区域下方。如何使提交按钮对齐文本区域的右侧？

<div class="email-form-wrap">

<?php if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 22 ); } ?>

</div>

textarea的类是'email-text-area'

提交按钮的类是'email-sub'

Answer 1

首先，您需要为字段指定一些类 - http://prntscr.com/bdalyh 然后添加一些样式：

.subscribe__email-wrap{
  float:left;
  width:calc(100% - 100px);
}

.subscribe__submit-wrap{
  float:right;
  width:100px;
}

请注意，您应该在样式字段contaienr的末尾添加-wrap而不是直接添加字段。 最后，您需要为表单添加一些clearfix样式：

.ninja-forms-all-fields-wrap:after{
  content:'';
  display:table;
  clear:both;
}