Отображать результат по горизонтали, используя стиль списка

Question

Отображать результат по горизонтали, используя стиль списка

0

Я попытался заставить его отображать все результаты по горизонтали, используя 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>

Я установил div_ product_inner_content для переполнения-y: auto;

Результат этого кода выглядит так:

Item 1       Item 2

Item 3

Item 4

Но я хочу:

Item 1     Item 2   Item 3   Item 4

user1348226 28 апр. 2014, в 10:14

Источник

Теги:

php

html

2 ответа

Ещё вопросы

Vincent · Answer 1 · 2014-04-28T06-08-00.000Z

В этом случае лучше сделать внешний 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
}

Это все еще результат, где пункт 3 и пункт 4 все еще включены ниже.
Это потому, что вы добавили ширину и высоту в каждом элементе li, вы должны использовать отступы для расстояния вместо добавления высоты и ширины. Я уже обновил код выше. Я не знаю, какой смысл использовать этот элемент div внутри li.
Да .. Я пробовал ваш код, но результат на моем сайте вертикальный. Black DIV отображается вертикально по прямой линии
Я не знаю, что не так с вашей разметкой, можете ли вы также предоставить внешний код CSS? Я уже создал скрипку на этом см .: jsfiddle.net/henf7 и, похоже, выглядит хорошо.

Manibharathi · Answer 2 · 2014-04-28T07-01-00.000Z

установите ширину для этого div <div id="product_inner_content">

#product_inner_content{ width:500px}

Это не должно быть связано с шириной DIV. Но я установил ширину 700px и overflow-x: auto