html - 如何使这些元素显示水平而不是垂直

Question

我试图让这些元素水平显示(一个紧挨着另一个)，但它们在我的页面上一直显示为垂直。它们连接到数据库，这就是所有 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>
  

Answer 1

给每个元素一个填充，这样它们就不会接触，然后将它们分别向左浮动。他们应该坐在一起。根据您想要的连续数量，确保它们的宽度合理。

例如:有两个元素，确保它们的总宽度(包括内边距/边距等)小于它们包含的内容的 50%。如果你有三个元素，确保它小于 33 %等