Кнопка половиной «вне» контейнера Как исправить?

Question

[Александр Соболев]

Здравствуйте! Есть, выводимая в модальное окно через wp_login_form(), форма входа

<!-- Modal -->
        <div class="modal fade" id="entrySYSTEM" tabindex="1" role="dialog" aria-labelledby="entrySYSTEMLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="entrySYSTEMLabel">Вход в систему EVENTSYSTEM</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body" id="authform_container">
                <?php get_eventsystem_authform(); ?>
              </div>
            </div>
          </div>
        </div>

function get_eventsystem_authform(){
		$authform_args = array(
		'echo'           => true,
		'redirect'       => site_url( $_SERVER['REQUEST_URI'] ), 
		'form_id'        => 'eventsystem_authform',
		'label_username' => __( 'Имя пользователя' ),
		'label_password' => __( 'Пароль' ),
		'label_remember' => __( 'Запомнить' ),
		'label_log_in'   => __( 'Войти' ),
		'id_username'    => 'user_login',
		'id_password'    => 'user_pass',
		'id_remember'    => 'rememberme',
		'id_submit'      => 'wp-submit',
		'remember'       => true,
		'value_username' => NULL,
		'value_remember' => false
		);
		wp_login_form($authform_args);

	}

<form name="eventsystem_authform" id="eventsystem_authform" action="cuminsideme.php" method="post">
			
			<p class="login-username">
				<label for="user_login">Имя пользователя</label>
				<input type="text" name="log" id="user_login" class="input" value="" size="20">
			</p>
			<p class="login-password">
				<label for="user_pass">Пароль</label>
				<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
			</p>
			
			<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Запомнить</label></p>
			<p class="login-submit">
				<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Войти">
				<input type="hidden" name="redirect_to" value="/dashboard">
			</p>
			
		</form>

form#eventsystem_authform > { float: none; display: inline-block; vertical-align: middle; font-family: 'Arsenal', sans-serif; font-size: 19.6px;}
form#eventsystem_authform > p > input { float: right; display: inline-block; vertical-align: middle; margin-left: 2%; margin-right: 2%; min-width: 66%; max-width: 70%; width: auto; }
form#eventsystem_authform > p.login-submit > input {min-width:98%; margin-bottom: 15%;}

Кнопка submit-a вертикально половиной вне нижей границы модалього окна. Как поправить?

Answer 1

[Роман]

Старая добрая "распорка"

form#eventsystem_authform::after {
  content: '';
  display: table;
  clear: both;

Хотя лучше бы отказаться от флоатов и использовать flex.

Comments

[Александр Соболев]

Роман, Спасибо огромое! Мне CSS в тонкостях еще предстоит освоить)