0
所以我的問題是我有額外搜索下的幾個元素,但我似乎無法讓他們在移動時顯示在同一行上。我的問題是,如何在移動設備上調整大小以便額外搜索中的所有元素保持在同一行上?移動上同一行上的所有元素
這是網站:http://www.onetechsearch.com/
.width-container {
max-width:1180px;
margin:0 auto;
position:relative;
}
#topbar {
background:#474747;
padding:15px 0 0 0;
min-height:70px;
position:fixed;
top:0;
z-index:999;
box-sizing: border-box;
width:100%;
box-shadow: 0 2px 10px #000;
}
#picture-side {
display: inline-block;
float:left;
z-index: 8;
text-align:center;
}
#picture-side label {
color: #ffffff;
}
#picture-side1 {
display: inline-block;
float:left;
z-index: 9;
text-align:center;
}
#picture-side1 label {
color: #ffffff;
}
#picture-side2 {
display: inline-block;
float:left;
z-index: 10;
}
#picture-side2 label {
color: #ffffff;
}
#span.select2-selection__rendered {
margin-left: 10px;
display: inline-block;
float: left;
z-index: 10;
}
input[type="radio"]:checked+label{ border-bottom: 5px solid lime; }
.site-wrap {
display: none;
}
#picture {
visibility: hidden;
}
#picture2 {
visibility: hidden;
}
#video {
visibility: hidden;
}
#chkPassport {
display: none;
margin-right: 60px;
}
#searchF label {
height:40px; line-height:40px; text-align:center;
margin-left: 20px;
color: #ffffff;
display: inline-block;
}
#from-side {
margin-left: 10px;
display: inline-block;
float: left;
z-index: 10;
color: #8a298a;
background-color: #6b446b;
}
span.select2-selection.select2-selection--single {
margin-left: 5px;
display: inline-block;
float: left;
z-index: 10;
}
#chkPassport label {
margin-left: 5px;
display: inline-block;
float: left;
z-index: 10;
}
#cat1 {
display: inline-block;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
<div id="topbar">
<div class="width-container">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/recipes" method="GET" id="searchF">
<?php
$searched_term = get_query_var('recipe_search');
if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search">
<label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />
Advanced Search
</label>
</div>
</div>
<div id="extra-search" div style="display:none;justify-content:center;align-items:center;margin: auto;width: 50%;" >
<div id="picture-side">
<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">With Pictures</label>
</div>
<div id="picture-side1">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">Without Pictures</label>
</div>
<div id="picture-side2">
<input type="radio" name="images" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='1'){ echo 'checked';} ?>><label for="video">With video</label>
</div>
<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="from-side" name="from" placeholder="Start date"
</div>
<div id="cat1">
<select id="cat" name="cat">
<option value="all">All categories</option>
<option value="HI">Hawaii</option>
<option value="C">Hawaji</option>
</select>
</div>
</div>
請編輯您的問題,也不會顯示桌面窗口太 –