0
我正在尝试使这些项目显示为水平（一个在另一个的右边），但他们在我的页面上始终垂直显示。他们连接到一个数据库，这就是为什么所有的PHP都在这里。这应该是所有你需要的信息，如果不让我知道。如何让这些项目显示为水平而不是垂直
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>