我的设计有问题。
我的产品页面上有两个按钮。然而，由于其中一个处于表格中，因此它们彼此叠置（参见图片）。
我想让这两个按钮彼此相邻。有人可以帮我吗？下面我添加了 HTML 和 CSS 代码。
提前致谢！
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
尝试使用显示：flex
.overlay-right text-center{
display: flex;
justify-content: space-between;
width: 200px;
margin: 0 auto;
align-items: center;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
