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

Question

Я пытаюсь понять, как сделать кнопки горизонтальными, а не вертикальными.

{% extends 'base.html' %} 
{% block title %} 
Register 
{% endblock %} 
{% block content %} 

<form action="/registration/customer/" method="post">{% csrf_token %} 
    <button style="font-size : 30px;width:350px;height:300px;" type="submit" name="type" value="customer" 
      class="btn btn-success">Zákazník 
    </button> 

</form> 
<form action="/registration/freelancer/" method="post"> {% csrf_token %} 
    <button style="font-size : 30px;width:350px;height:300px;" type="submit" name="type" value="freelancer" 
      class="btn btn-success">Predajca 
    </button> 

</form> 

{% endblock %} 

Есть две кнопки, каждая кнопка должна работать различно view. Я хочу сделать их бок о бок.

Answer 1

используя стиль CSS, как

form { 
    display:inline; 
} 

это будет отображаться форма инлайн с их buttton (настроить экран шире, и вы увидите результаты)

здесь скрипку https://jsfiddle.net/repzeroworld/8agtkr30/

Answer 2

В вашем классе btn вы должны добавить text-align: center.

Если он не работает, убедитесь, что ширина вашей формы составляет 100%, так как она будет выровняться в зависимости от размера вашей формы.