HTML inline forms with buttons-CodePudding

Here is my HTML code:

<div class="text-right">
    <form method="post" action="create_car_type.html">
        <button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
            Create a type
        </button>
    </form>
    <form method="post" action="delete_car_type.html">
        <button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
            Delete a type
        </button>
    </form>
</div>

These two buttons are inside forms, which are inside a div. They are right aligned in this div, but I would like to display them inline. The way they are displayed currently is that one places above the other, which is something I want to avoid. Should I include something like display: inline somewhere? Where should this go?

CodePudding user response：

Just use float: left to your first button

<div class="text-right">
  <form method="post" action="create_car_type.html" style="float:left;">
    <button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
      Create a type
    </button>
  </form>

  <form method="post" action="delete_car_type.html">
    <button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
      Delete a type
    </button>
  </form>
 </div>

P.S: Though I think it's not a good idea to use a form just for submitting the button. Rather use a single form, keep the button separate and submit them on click event.

CodePudding user response：

add style="display: inline-block;" to form tags

<div class="text-right">
    <form method="post" action="create_car_type.html" style="display: inline-block;">
        <button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
            Create a type
        </button>
    </form>
    <form method="post" action="delete_car_type.html" style="display: inline-block;">
        <button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
            Delete a type
        </button>
    </form>
</div>

CodePudding user response：

you can use a display: flex or display: inline-flex to your main div tag and this is the most easy way to make something inline. something like this

.text-right{
  display: flex;
  gap: 10px; /*also you can use gap to give a space between them*/
}

             <div class="text-right">
                <form method="post" action="create_car_type.html">
                    <button type="submit" value=4 class="btn btn-danger ml-2 mr-3" title="Create a car type">
                        Create a type
                    </button>
                </form>
                <form method="post" action="delete_car_type.html">
                    <button type="submit" value=3 class="btn btn-warning ml-2 mr-3">
                        Delete a type
                    </button>
                </form>
            </div>