Php 使用列表样式水平显示结果

我尝试使用LI标记中的float:LEFT使其水平显示所有结果。 但它显示每一行只显示两个结果

这是我的代码：

<div id="product_inner_content">
<?php
require('database_connection.php');
if (@mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$latest_tyres = "SELECT * FROM tblInventory WHERE LATEST='L'";
$result = mysqli_query ($mydatabase, $latest_tyres);

//ccreating a list style                            
echo "<ul style='list-style-type:none;display:inline;padding:0;'>";
while ($row = mysqli_fetch_array($result)) 
{
   //display result in <li>
   echo "<li id=='Number_".$row['IMLITM']."' style='width:230px;height:320px;background-color:green;display:inline;float:left'>";
   echo "<div style='width:220px;height:320px;background-color:black;margin-left:auto;margin-right:auto'>";
   echo "</div>";
   echo "</li>";
}
echo "</ul>";

mysqli_close($mydatabase);
?>
</div>

但我想要这个：

Item 1     Item 2   Item 3   Item 4

---

在这种情况下，最好使用外部css而不是内联样式。也许您可以将id（#）添加到该ul元素中

HTML

 echo "<ul id = 'mylist'>";
    while ($row = mysqli_fetch_array($result)) 
    {
       //display result in <li>
       echo "<li id=='Number_".$row['IMLITM']."'>";
       echo "<div>";
       echo "</div>";
       echo "</li>";
    }
    echo "</ul>";

---

设置此分区的宽度

---

它仍然会在下面的第3项和第4项仍然存在的地方显示结果。这是因为您在每个li元素中添加了宽度和高度，您应该使用填充作为间距，而不是添加高度和宽度。我已经更新了上面的代码。我不知道li里面的div元素有什么用。是的。我试过你的代码，但是我的网站的结果是垂直的。黑色DIV垂直显示在一条直线上我不知道你的标记有什么问题，你能提供外部css代码吗？我已经在这个see上创建了一个提琴：看起来不错。它应该与DIV宽度无关。但是我将宽度设置为700px，并将溢出-x:auto

 echo "<ul id = 'mylist'>";
    while ($row = mysqli_fetch_array($result)) 
    {
       //display result in <li>
       echo "<li id=='Number_".$row['IMLITM']."'>";
       echo "<div>";
       echo "</div>";
       echo "</li>";
    }
    echo "</ul>";

ul#mylist li{
    list-style-type:none;
    padding:0;
    padding: 5px 10px;
    background-color:green;
    float: left;
}

ul#mylist li div{
    background-color:black;
    margin-left:auto;
    margin-right:auto
}

#product_inner_content{ width:500px}