水平使用列表樣式顯示結果

我試圖使用float：LEFT在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格成爲溢出-Y：汽車;

這段代碼的結果是這樣的：

Item 1  Item 2 

Item 3 

Item 4

但我想這一點：

Item 1  Item 2 Item 3 Item 4

來源

2014-04-28 user1348226

在這種情況下，它是使外部CSS比內嵌樣式的最佳做法。也許你可以添加ID（＃）到UI元素

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 
}

來源

2014-04-28 08:12:07 Vincent

它仍然是項目3的結果第4項仍在下面。 – user1348226

這是因爲您已經在每個li元素中添加了寬度和高度，所以應該使用間距的填充而不是添加高度和寬度。我已經更新了上面的代碼。雖然我不知道里面的那個div元素的用法是什麼。 – Vincent

是的..我曾試過你的代碼，但我的網站的結果是垂直的。黑色DIV垂直顯示在一條直線上 – user1348226

設置寬度爲這個div <div id="product_inner_content">

#product_inner_content{ width:500px}

來源

2014-04-28 08:25:07 Manibharathi

它不應該與DIV寬度有關。但是我將寬度設置爲700px，overflow-x：auto – user1348226

水平使用列表樣式顯示結果

回答

相關問題