Html - How to display different forms in a single line?-CodePudding

I am using 3 different forms for my flask application. I want to display these forms in a single line instead of one below the other. Is there anyway to do it? Here's my html snippet (no css used yet)

<form action="/pull_entity_by_manufacturer" method="post">
    pull an entity by a given man <input type="text" name="ev_manu"><input
        type="submit"/>
</form>

<form action="/pull_entity_by_year" method="post">
    pull an entity by a given yr <input type="number" name="ev_yr"><input type="submit"/>
</form>

<form action="/pull_entity_by_range" method="post">
    <label for="cars">Range upto:</label>
    <select name="ev_rg" id="cars">
        <option value="600">600</option>
        <option value="500">500</option>
        <option value="400">400</option>
        <option value="300">300</option>
        <option value="200">200</option>
    </select>
    <input type="submit"/>
</form>

CodePudding user response：

Form tag is a "Block level" element like Div tag for example.

you can add CSS to change it

<style> form{display:inline-block} </style>

Or by using flex

CodePudding user response：

<style>
   .container {
     display: flex;
     justify-content: space-around;
   }
  
   input {
     display:block;
   }
   </style>

<div >
   <form action="/pull_entity_by_manufacturer" method="post">
    Pull an entity by a given man <input type="text" name="ev_manu"><input
        type="submit"/>
</form>

<form action="/pull_entity_by_year" method="post">
    Pull an entity by a given year <input type="number" name="ev_yr"><input type="submit"/>
</form>

<form action="/pull_entity_by_range" method="post">
    <label for="cars">Range upto:</label>
    <select name="ev_rg" id="cars">
        <option value="600">600</option>
        <option value="500">500</option>
        <option value="400">400</option>
        <option value="300">300</option>
        <option value="200">200</option>
    </select>
    <input type="submit"/>
</form>
</div>