在 1 行中显示表格

Question

我正在制作画廊网站，我正在使用排序和分类功能来改善它的外观和效果。我也有管理仪表板。我正在尝试使类别、排序和管理仪表板位于页眉和主要内容之间的 1 行中，但我不知道该怎么做，它仍然位于多行中。我还需要在移动设备上相互显示类别、排序和管理。

<div class="con">
    <a href="admin/" class="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>

Answer 1

这是你想要的吗？

<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>

要使其响应，您需要修改 css 代码

Answer 2

<style>
form {
  text-align: center;
}

section {
  height: 50px;
  text-align: center;
}

.con {
  padding-bottom: 160px;
  color: white;
  text-align: left;
}

 .con label {
 width: 120px;
float: left;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 80px;
}

.con select {
float: left;
width: 180px;
margin-right: 50px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
}

.admin-btn {
 width: 100px;
align-content: right;
float: right;
margin-right: 10%;
  }
</style>
<div class="content home">
<div class="con">
    <form action="" method="get">
        <label for="category">Kategória: </label>
        <select id="category" name="category" onchange="this.form.submit()">
            <option value="all" <?= $sort_by == 'all' ? ' selected' : '' ?>>Všetky</option>
            <?php foreach ($categories as $c) : ?>
                <option value="<?= $c['id'] ?>" <?= $category == $c['id'] ? ' selected' : '' ?>><?= $c['title'] ?></option>
            <?php endforeach; ?>
        </select>
        <label for="sort_by">Zoradiť od: </label>
        <select id="sort_by" name="sort_by" onchange="this.form.submit()">
            <option value="newest" <?= $sort_by == 'newest' ? ' selected' : '' ?>>Najnovších</option>
            <option value="oldest" <?= $sort_by == 'oldest' ? ' selected' : '' ?>>Najstarších</option>
            <option value="z_to_a" <?= $sort_by == 'z_to_a' ? ' selected' : '' ?>>A-Z</option>
            <option value="a_to_z" <?= $sort_by == 'a_to_z' ? ' selected' : '' ?>>Z-A</option>
            <option value="rokasc" <?= $sort_by == 'rokasc' ? ' selected' : '' ?>>Podla roku od najnovsich</option>
            <option value="rokdesc" <?= $sort_by == 'rokdesc' ? ' selected' : '' ?>>Podla roku od najstarsich</option>
        </select>
        <button class="admin-btn"><a href="admin/" class="admin">ADMIN</a></button>
    </form>

在 1 行中显示表格

Show form in 1 row

html

css

forms