我正在制作畫廊網站，我正在使用排序和類別功能使其看起來更好并且作業得更好。我也有管理儀表板。我正在嘗試使類別、排序和管理儀表板在標題和主要內容之間的 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>
uj5u.com熱心網友回復：
這是你想要的嗎？
<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 代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411379.html
標籤：
上一篇：jQuerymouseenter和mouseleave：阻止孩子并放大影像
下一篇：接近div底部時逐漸減小JS值