Getting two buttons next to each other

问题

I am having a problem with my design.

I have two buttons on my product page. However because one is in a form, they are on top of each other(see image ).

I want to get the two buttons next to each other. Can someone help me out, please ? Below I added my HTML and CSS code.

Thanks in advance!

HTML:

<!DOCTYPE HTML>
<div class="container text-center">
            <div class="sale">
                <h1>On Sale</h1>
                <p class="text-secondary">
                    We have new sales promotions online for a short period of time every day. We offer products from
                    popular labels and luxury brands in the lifestyle segment up to 75% cheaper than the
                    recommended retail price.
                </p>
            </div>
</div>

        <section class="on-sale">
            <div class="container">
                <div class="row">

                <?php
                    for($i = 0; $i < $countProductItems && $i < 4; $i++){
                        ?>
                        <div class="col-md-3">
                        <div class="product-top">
                        <a href="products/product-page.php?product=<?php echo ($saleProducts[$i]['strProductNaam']); ?>" onclick="POST"><img src="<?php echo ($saleProducts[$i]['imgProduct1']);?>" class="img-fluid" alt="Product1"/></a>
                            <div class="overlay-right text-center">
                                <button type="button" class="btn btn-secondary" title="Quick Shop">
                                <a href="products/product-page.php?product=<?php echo ($saleProducts[$i]['strProductNaam']); ?>" onclick="POST"><i class="fa fa-eye text-white"></i></a>
                                </button>
                                <form action="includes/shopping-cart.inc.php?action=add&id=<?php echo ($saleProducts[$i]['ID'])?>" method="post">
                                    <input class="text-center" type="hidden" name="quantity" value="1"/>
                                    <input type="hidden" name="index-page" value="index">
                                    <input type="hidden" name="product-name" value="<?php echo ($saleProducts[$i]['strProductNaam']); ?>">
                                    <input type="hidden" name="product-price" value="<?php echo ($saleProducts[$i]['strSalePrijs']); ?>">
                                    <button type="submit" class="btn btn-secondary " title="Add to cart" name="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
                                </form>
                            </div>
                        </div>
                        <div class="product-bottom text-center">
                        <p>
                                <?php rating_star(($saleProducts[$i]['RatingStar'])) ?>
                            </p>
                            <p><h3><?php echo ($saleProducts[$i]['strProductNaam']); ?></h3></p>
                            <?php sale_product(($saleProducts[$i]['intPrijs']), ($saleProducts[$i]['strSalePrijs']))?>
                        </div>
                    </div>
                    <?php
                    }
                ?>

                </div>
            </div>
        </section>
</html>

CSS:

.container .sale{
    padding: 3rem 0;
    }

    .container .sale{
        font-family: var(--gugi);
    }

    .container .sale{
        padding: 0.5% 25%;
        font-size: 0.9em;
    }

.on-sale{
    margin: 50px 0;
}

.on-sale img{
    width: 100%;
    padding: 20px;
    transition: 1s;
    cursor: pointer;
}

.on-sale img:hover{
    transform: scale(1.1);
}

.product-top{
    width:100%;
    display: inline-block;

}

.product-bottom .fa{
    color: orange;
    font-size: 10px;
}

.product-bottom h3{
    font-size: 20px;
    font-weight: bold;
}

.product-bottom h5{
    font-size: 15px;
    padding-bottom: 10px;
}

.make_red {
        color: red;
}

// codefilling text[error] - nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg

回答1:

try use display:flex

.overlay-right text-center{
    display: flex;
    justify-content: space-between;
    width: 200px;
    margin: 0 auto;
    align-items: center;

}

回答2:

You can give the form a display: inline in your css. Default display is block for a form

回答3:

You can try this as well--

button {
  display: inline;
  margin: auto;
  padding: 5px;
}

来源：https://stackoverflow.com/questions/62117666/getting-two-buttons-next-to-each-other

标签

html

css