如何使这些项目显示水平而不是垂直答案

【问题标题】：How do I make these items display horizontal instead of vertical如何使这些项目显示水平而不是垂直
【发布时间】：2017-11-19 14:24:59
【问题描述】：

我正在尝试使这些项目水平显示（一个紧挨另一个），但它们一直在我的页面上垂直显示。它们连接到数据库，这就是所有 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>

【问题讨论】：

标签： html css database inline display

【解决方案1】：

给每个项目一个内边距，这样它们就不会接触，然后将它们分别向左浮动。他们应该坐在一起。根据你想要连续多少个，确保它们的宽度是合理的。

例如：拖曳有两个项目，确保它们的总宽度（包括填充/边距/等）小于它们所包含的任何内容的 50%。如果您有三个项目，请确保它小于 33 %等

【讨论】：