Как выравнять 2 кнопки горизонтально?

Question

[Plov187]

Приветствую. Собственно вопрос в заголовке.
Есть такой код:

<div class="blocks">
	<xf:form action="{{ link('login/login') }}" class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:if is="$uix_loginPreventAutoFocus">
					<xf:textboxrow name="login" value="{$login}" autocomplete="username"
						label="{{ phrase('your_name_or_email_address') }}" />
				<xf:else/>
					<xf:textboxrow name="login" value="{$login}" autofocus="autofocus" autocomplete="username"
						label="{{ phrase('your_name_or_email_address') }}" />
				</xf:if>

				<xf:passwordboxrow name="password" autocomplete="current-password"
					label="{{ phrase('password') }}">

					<xf:html>
						<a class="uix_forgotPassWord__link" href="{{ link('lost-password') }}" data-xf-click="overlay">{{ phrase('forgot_your_password') }}</a>
					</xf:html>
				</xf:passwordboxrow>

				<xf:if is="$captcha">
					<xf:captcharow label="{{ phrase('verification') }}" force="true" />
				</xf:if>
				<xf:checkboxrow>
					<xf:option name="remember" selected="true">{{ phrase('stay_logged_in') }}</xf:option>
				</xf:checkboxrow>
				<xf:hiddenval name="_xfRedirect">{$redirect}</xf:hiddenval>
			</div>
			<xf:submitrow icon="login" />
			<div class="register-button">
				<xf:submitrow><xf:html>
		<xf:button type="submit" class="button--primary" id="js-signUpButton">
			<a href="{{ link('register') }}">Регистрация</a>
		</xf:button>
	</xf:html></xf:submitrow>
			</div>
		</div>

Код, который нужно "пододвинуть" в кнопке:

<div class="register-button">
				<xf:submitrow><xf:html>
		<xf:button type="submit" class="button--primary" id="js-signUpButton">
			<a href="{{ link('register') }}">Регистрация</a>
		</xf:button>
	</xf:html></xf:submitrow>
</div>

Нужно:

Сейчас:


* Заранее спасибо.

Answer 1

[n1ksON]

Добавьте css-свойство display: flex родительскому элементу кнопки.

Comments

[Plov187]

Результат не изменился.

[n1ksON]

Plov187, скиньте CSS код.

[Plov187]

n1ksON, Вот именно, что в нём пока ничего нет.

.register-button {
      ....
}

[n1ksON]

Plov187, нужно поместить css-свойство в блок, в котором находятся обе кнопки. Смотрите пример ниже.

Answer 2

[Алексей Шелементьев]

Надо сделать вот так:

<div class="wrapper">
    <button>One</button>
    <button>Two</button>
</div>

.wrapper {
    display: flex;
}

.wrapper button:not(:last-child) {
    margin-right: 20px;
}