0
J'essaie de faire en sorte que ces éléments s'affichent horizontalement (l'un juste à côté de l'autre) mais ils continuent à apparaître verticalement sur ma page. Ils sont connectés à une base de données, c'est pourquoi tout le php est ici. Cela devrait être toute l'information dont vous avez besoin si vous ne le faites pas savoir.Comment faire pour que ces éléments s'affichent horizontalement plutôt que verticalement
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding-bottom: 5px;
padding-left:5%;
}
.inline {
max-width: 25%;
display:inline;
}
.caption {
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
max-width: 25%;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY(-webkit-calc(-100% - 10px));
transform: translateY(calc(-100% - 10px));
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}<div class="content">
<div class="inline">
<div class="caption">
<img src="<?php echo $row["image"]; ?>" class="caption__media">
<div class="caption__overlay">
<h5 class="caption__overlay__title"><?php echo $row["p_name"]; ?></h5>
<p class="caption__overlay__content">
<form class="addToCart" action="index.php?action=add&id=<?php echo $row["id"]; ?>" method="post">
<h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
<input type="hidden" name="quantity" class="form-control" value="1">
<input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
<input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
<button class="add">Add to cart
<input type="hidden" name="add" id="submit"></button></form></p></div></div></div></div>