如何在html和css中创建垂直图库

我正在php中创建一个电子商务商店，我的php代码运行得很好，但我的产品是垂直排列的，我希望它们是水平排列的。

我尝试了float:left，display:inline。。。但它不起作用

我想看到4种产品在同一条线上。

我的php代码（忽略语言）

<?php
  $consulta = mysql_query("SELECT * 
                           FROM  `livros-desporto` ");
     if(isset($_POST['buscar'])){
    $consulta = mysql_query("SELECT * 
                             FROM `livros-desporto`
                             where name like '%".$_POST['buscar']."%'");
     }
      while ($linha = mysql_fetch_array($consulta))  
      {
          $id = $linha['ID'];
          $modelo = $linha['Model'];
          $nome = $linha['Name'];
          $categoria = $linha['Category'];
          $imagem = $linha['Image'];
          $manufactura = $linha['Manufacturer'];
          $preco = $linha['Price'];
          $quantidade = $linha['quantity']
         // $adicionar = '<a href="carrinho.php?id='.$linha['ID']
             //.'"title="'.$linha['ID'].'">
        //  Adicionar </a>'   
   ?>

我的HTML代码

<div class="fade1">
<div class="produtos">
<li>            
    <p><?php echo $nome ?></p>
    <p><?php echo $imagem ?></p>
    <p><?php echo $categoria ?></p>
</li>
</div>
</div>
</div>
<?php
      }
  ?>

感谢