Question

我尝试使用float：LIFT在LI标签中水平显示所有结果。但它显示每行只显示两个结果。

这是我的代码：

<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>

我已将product_inner_content div设置为overflow-y：auto;

此代码的结果如下：

Item 1       Item 2

Item 3

Item 4

但我想要这个：

Item 1     Item 2   Item 3   Item 4

Answer 1

在这种情况下，最好使用外部css而不是内联样式。也许你可以为那个ul元素添加id（＃）

<强> 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>";

<强> CSS

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
}

Answer 2

设置此div <div id="product_inner_content">

的宽度

#product_inner_content{ width:500px}

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

2 个答案: