Question

我在白色寄宿生中有一个div，在较大的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

我已将＃postcode-no元素放在bootstrap col-元素中，以确保它保留在div中。如果这不起作用。你能检查你的＃postcode-no元素并确保它没有位置：绝对定位？因为我也看到了一个底部：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/

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

2 个答案: