목록 스타일을 사용하여 가로 방향으로 결과 표시

Question

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> 

내가 오버 플로우-Y가 내 product_inner_content div에 설정 한 : 자동;

이 코드의 결과는 다음과 같이이다 :

Item 1  Item 2 

Item 3 

Item 4 

하지만이 원하는 :이 경우

Item 1  Item 2 Item 3 Item 4 

Answer 1

를, 인라인 스타일보다 외부 CSS를 만들 수있는 가장 좋은 방법이다. 어쩌면 당신은

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

이의 폭을 설정하는 것이 UL 요소에 ID (#)를 추가 할 수 있습니다 <div id="product_inner_content">

#product_inner_content{ width:500px}