モバイル上の同じ行にあるすべての要素

Question

私の問題は、私は余分な検索の下にいくつかの要素があることですが、モバイル上で同じ行に表示されるようには見えません。私の質問は、モバイルデバイス上ではどのようにサイズを変更して、余分な検索のすべての要素が同じ行に保持されるようにすることですか？

これはウェブサイトである：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>

Answer 1

ブラウザページの幅が特定未満/大きいときには、特定のCSSの適用を可能にするために@Media Queryを使用することができます寸法。あなたのCSSの例

、：

@media screen and (min-width: 480px) { 
    #extra-search { 
     display: inline-block; 
     width: 450px; 
     height: 100%; 
    } 
}