在 1 行中显示表格答案

【问题标题】：Show form in 1 row在 1 行中显示表格
【发布时间】：2022-01-15 20:55:31
【问题描述】：

我正在制作画廊网站，我正在使用排序和类别功能使其看起来更好，并且更好地工作。我也有管理仪表板。我正在尝试使类别、排序和管理仪表板在标题和主要内容之间的 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>

【问题讨论】：

你在哪里卡住了？您是否 - 至少 - 创建了 HTML 结构？你能和我们分享一下 - “minimal reproducible example” - 代码吗？

标签： html css forms

【解决方案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 代码

【讨论】：

【解决方案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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。