Question

所以我的问题是我在额外搜索下有一些元素，但我似乎无法在移动时将它们显示在同一行上。我的问题是如何在移动设备上调整大小以使额外搜索中的所有元素保持在同一行？

这是网站：http://www.onetechsearch.com/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

当浏览器页面的宽度小于/大于特定维度时，您可以使用@Media Query启用特定css的应用程序。

例如，在你的css中：

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

移动设备上同一行的所有元素

1 个答案: