本文介绍了使两个按钮彼此相邻的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的设计有问题.
我的产品页面上有两个按钮.但是，由于一个人处于某种形式，所以它们彼此重叠(请参见图片).
I have two buttons on my product page. However because one is in a form, they are on top of each other(see image ).
我想使两个按钮彼此相邻.有人可以帮我吗?在下面，我添加了我的HTML和CSS代码.
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.
提前谢谢！
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; }//代码填充文本[错误]-nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg
// codefilling text[error] - nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg
推荐答案尝试使用display:flex
try use display:flex
.overlay-right text-center{ display: flex; justify-content: space-between; width: 200px; margin: 0 auto; align-items: center; }更多推荐
使两个按钮彼此相邻
发布评论