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>

文本区域的 class 是 'email-text-area'

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

Answer 1

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

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

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

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

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

Ninja Forms - Align text area and submit button