Формы ниндзя - Выровняйте текстовую область и нажмите кнопку отправки

Я просто разместил простую форму подписки по электронной почте на своем веб-сайте, используя плагин Ninja Forms Wordpress. Кнопка отправки находится под текстовой областью. Как сделать так, чтобы кнопка отправки была выровнена по правому краю текстовой области?

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

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

</div>

Класс для текстовой области - "электронная-текстовая-область".

Класс для кнопки отправки - email-sub.


person Learning to Code    schedule 07.06.2016    source источник


Ответы (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;
}
person Alexey Svidentsov    schedule 07.06.2016
comment
Сработало отлично. Спасибо. - person Learning to Code; 08.06.2016