如何將此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/