在另一个下面设置一个div

Question

我目前在我的网站上遇到了一个大问题：http://www.onetechsearch.com/recipes/?search=&images=1&from=&to=&cat=all。

我想要做的是拥有我的搜索栏，并在其下进行“额外搜索”，无论我如何尝试额外搜索都不会进行正常搜索。

当我按下搜索旁边的按钮时，我想进行额外的淡入和淡出，我知道如何做到这一点？

<style type="text/css">

#picture-side {
    display: inline-block; 
    float:left;
    z-index: 8; 
    text-align:center;
}

#picture-side1 {
    display: inline-block; 
    float:left;
    z-index: 9; 
    text-align:center;
}
.width-container {
    max-width:1180px;
    margin:0 auto;
    position:relative;
}

#topbar {
background:#f2f2f2;
padding:15px 0 0 0;
min-height:70px;
position:fixed;
top:0;
z-index:998;

box-sizing: border-box;
width:100%;
box-shadow: 0 2px 10px #000;
}   

 #search input#sfield{
    margin:0;
    width:54%;
    padding:0 10px;
    font:normal 16px Arial, sans-serif;
    border:none;
    float:left;
    border-radius:5px 0 0 5px;
    box-shadow: 0 0 4px #444;

#picture-side2 {
    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;
}   
</style>

<?php if(is_front_page() & 0){ ////////////////////ONLY ON FRONTPAGE///////////////////////?>
    <ul id="side_cat" class="navigation">
    <?php 
        global $client;
        $categs = $client->getResult('*:*', "", 0, 1);

        //$count = count($categs[0]['category_f']) > 20 ? 20 : count($categs[0]['category_f']);
        $nCategs = $client->getResponse()->facet_counts->facet_queries;

        $count = count((array)$nCategs);
        foreach ($cat2 as $k => $v) {
            $cat2[$k] = strtolower($v);
        }               
            $categs_n = array();
            $categs_v = array();
            foreach ($nCategs as $k => $v)
            {            
                $categs_v[] = $v;
                $categs_n[] = $k;
            }

        $j = 0;
        $newC = array();
        for ($i= 0; $i < $count; $i++) {
        /* foreach ($cat as $cat){ */           
            if (in_array($categs_n[$i], $cat2) && $j < 30 ) { 
                $j++;
                $newC[] = ucfirst($categs_n[$i]); ?>
            <?php }
        } 

        foreach ($newC as $categ)
        { ?>
            <li class="nav-item"><a href="<?php bloginfo('url');?>/recipes/category/<?php echo ucwords(sanitize_title(trim($categ))); ?>"><?php echo ucwords($categ); ?></a></li>

        <?php           
        }
        ?>
    </ul>

    <input type="checkbox" id="nav-trigger" class="nav-trigger">
    <label for="nav-trigger"></label>

<?php } else { ////////////////////OTHER PAGES///////////////////////?>

<?php }?>    

        <script src="jquery-1.8.0.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var cat= ["C"];
                $("#cat").select2({
                  data: cat
                });
            });
        </script>    

    <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">    
            </div>  
        </div>  

    <div id="extra-search" div style="display:flex;justify-content:center;align-items:center;z-index:-9000" >
            <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>    

                    <select id="cat" name="cat">
                        <option value="all" selected>All categories</option>
                        <option value="HI">Hawaii</option>
                        <option value="C">Hawaji</option>
                        </select> 
    </div>          
            </form>
</div>

</div>    

    <script type="text/javascript">
    jQuery(document).ready(function() {
        console.log(1);
        jQuery("#searchF").submit( function(event) {
        console.log($("#cat :selected").val());
        var bAction = "<?php bloginfo('url');?>";
        bAction = bAction + "/recipes/category/" + $("#cat :selected").val();
        jQuery("#searchF").find('#cat').attr('disabled', true);
                    jQuery(this).attr('action', bAction);
                            });
                            });
    </script>

Answer 1

只需删除CSS中float: left;上的#search。

Answer 2

进行更改以使其正常工作：

#topbar h1 - set width:
width: 100%;

#extra-search - set only those styles:
position: relative;
float: left;
max-width: 1180px;
margin: 0 auto;

如果你想利用display：flex - 只需在extra-search中添加另一个div。