Show form in 1 row-CodePudding

I am making gallery site and I am using Sorting and Category functions to make it look and work better. Also I have Admin Dashboard. I am trying to make, that Category, Sorting and Admin Dashboard will be in 1 row between Header and Main content, but I don't know how to do it, it is still on multiple rows. Also I need to show Category, Sorting and Admin under each other on mobile devices.

<div >
    <a href="admin/" >ADMIN</a>
    <form action="" method="get">
        <label for="category">Category:</label>
        <select id="category" name="category" onchange="this.form.submit()">
            <option value="all"<?=$sort_by=='all'?' selected':''?>>All</option>
            <?php foreach ($categories as $c): ?>
            <option value="<?=$c['id']?>"<?=$category==$c['id']?' selected':''?>><?=$c['title']?></option>
            <?php endforeach; ?>
        </select>
        <label for="sort_by">Sort By:</label>
        <select id="sort_by" name="sort_by" onchange="this.form.submit()">
            <option value="newest"<?=$sort_by=='newest'?' selected':''?>>Newest</option>
            <option value="oldest"<?=$sort_by=='oldest'?' selected':''?>>Oldest</option>
            <option value="a_to_z"<?=$sort_by=='a_to_z'?' selected':''?>>A-Z</option>
            <option value="z_to_a"<?=$sort_by=='z_to_a'?' selected':''?>>Z-A</option>
        </select>
    </form>
</div>

CodePudding user response：

Is This is wat you want?

<html>
<head>
<style>
*{margin:0;}
body{border: 1px solid black;}
header {
    height: 50px;
    border: 1px solid black;
    text-align: center;
    
    }
form{text-align:center}
section{
    height:50px;
    border: 1px solid black;
    text-align: center;
}
</style>
</head>
<body>
<header>
    <h1>Header</h>
</header>
<div id="search">
<form>
<label>Category:</label>
<select>
<option>All</option>
  <optgroup label="Books">
    <option value="">Fiction</option>
    <option value="">Romance</option>
  </optgroup>
  <optgroup label="Movies">
    <option value="">Action</option>
    <option value="">Comedy</option>
  </optgroup>
</select>
<label>Sorting:</label>
<select>
<option>Newest</option>
</select>
<input type="submit" value="Admin"/>
</form>
</div>
<section>
<h1>MAIN CONTENT</h1>
</section>
</body>
</html>

To make it responsive you need to modify on css code