如何将此div放置在此搜索表单下方？

Question

我有一个白色寄存器内的div和一个更大的div内的搜索表单，如下图所示。我有

问题是，我想小分度，白边境下面的搜索表单的位置，但它保持向左或搜索表单无论我做什么的权利。我尝试了几件事，没有任何工作。有谁知道如何解决这一问题？ 注意：我为此使用了wordpress和bootstrap。

CSS：

#cover { 
    padding-top: 110px; /*stops the text from pullung down the image*/ 
    height: 580px; 
    background-image: url('http://image.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    background-color: transparent; 
    text-align: center; 
} 
#postcode-search { 
    margin-top: 40px; 
} 
#postcode-bar { 
    height: 50px; 
    background-color: #fff; 
    text-align: center; 
    font-size: 13px; 
    /*outline: yellow;*/ 
} 
#postcode-btn { 
    height: 50px; 
} 
#postcode-no { 
    width: 451px; 
    height: 50px; 
    display: list-item; 
    color: #fff; 
    text-align: center; 
    border: 2px solid #fff; 
    bottom: 10px; 
} 

HTML：

<div id="cover"> 
     <div class="search-row"> 

      <form role="search" method="get" class="search-form" action="<?php echo home_url(); ?>"> 

       <div class="postcode-search col-lg-4 col-lg-offset-4"> 
       <div id="postcode-search" class="input-group"> 
        <input type="text" id="postcode-bar" class="form-control" value="<?php the_search_query();?>" placeholder="Enter your postcode"/> 
        <span class="input-group-btn"> 
        <button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button> 
        </span> 
       </div><!-- /input-group --> 
       </div><!-- /.col-lg-6 --> 

      <div id="postcode-no"></div> 

      <?php 
       if (function_exists('woocommerce_product_search')) { 
        echo woocommerce_product_search(array('limit' => 40)); 
       } 
      ?> 
      </form> 

     </div> 
    </div> 

Answer 1

内

我已经把＃邮编号元素在引导col-元素内，以确保它保持在div内。如果这不起作用。你可以检查你的＃邮编 - 没有元素，并确保它没有位置：绝对定位？因为我也看到一个底部：10px放在那个元素上。

也许你还可以删除

display: list-item; 
width: 451px; 

和ADD

display: block; 

新的HTML：

<div id="cover"> 
    <div class="search-row"> 

     <form role="search" method="get" class="search-form" action="<?php echo home_url(); ?>"> 

      <div class="postcode-search col-lg-4 col-lg-offset-4"> 
      <div id="postcode-search" class="input-group"> 
       <input type="text" id="postcode-bar" class="form-control" value="<?php the_search_query();?>" placeholder="Enter your postcode"/> 
       <span class="input-group-btn"> 
       <button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button> 
       </span> 
      </div><!-- /input-group --> 
      <div id="postcode-no"></div> 
      </div><!-- /.col-lg-6 --> 

     <?php 
      if (function_exists('woocommerce_product_search')) { 
       echo woocommerce_product_search(array('limit' => 40)); 
      } 
     ?> 
     </form> 

    </div> 
</div> 

Answer 2

结账小提琴 我把float:left元件内部和你的邮编，没有我把一个div

https://jsfiddle.net/5cvu8fnq/