我试图使用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>
我已经将product_inner_contentdiv设置为overflow-y:auto；
这个代码的结果是这样的：
Item 1 Item 2
Item 3
Item 4
但我想要这个：
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>";
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
}
设置此div <div id="product_inner_content"> 的宽度
#product_inner_content{ width:500px}