html - 我想将 MySQL 数据库中的列表数据格式化为偶数行和列

Question

如标题所说。我看过其他示例，但它们似乎不符合我的要求。我正在以列表格式将数据库中的数据回显给用户。我希望它在显示时显示为偶数行和列。

这是我当前的CSS代码

.recent_items{
    margin-left: 10%;
    margin-right: 10%;
}

.item li{
    list-style: none;
    display: inline-block;
    padding: 10px;
}
.item{
   width:85%;
}

这里是数据的php代码

<?
                    $per_page = 30;
                    $pages_query = mysql_query("SELECT COUNT(*) FROM ads") or die(mysql_error());
                    $pages = ceil(mysql_result($pages_query, 0)/ $per_page);
                    $curr_page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
                    $start = ($curr_page - 1) * $per_page;

                    //get ad information
                    $ad_info = mysql_query("SELECT * FROM ads ORDER BY dateCreated DESC LIMIT $start, $per_page") or die(mysql_error());
                    $rows = mysql_num_rows($ad_info);

                    echo '<ul class="item">';
                    while($row = mysql_fetch_array($ad_info)){
                        $ad_id = $row['adId'];
                        $title = $row['title'];
                        $price = $row['price'];
                        $location = $row['location'];

                        $ad_type = mysql_query("SELECT * FROM types WHERE adId=$ad_id") or die(mysql_error());
                        while($row = mysql_fetch_array($ad_type)){
                            $cat = $row['category'];
                            $sub = $row['subCat'];

                            echo
                            "
                                <li>$title</br>
                                <label>Price:</label> $price</br>
                                <label>Location:</label> $location</br>
                                <a href=\"search.php?searchValue=".$cat."\">$cat</a>/<a href=\"search.php?searchValue=".$sub."\">$sub</a></li>
                            ";
                        }
                    }
                    echo '</ul>';

                    if($pages >= 1 && $curr_page <= $pages){
                        for($x = 1; $x <= $pages; $x++){
                           echo ($x == $curr_page) ? "<b><a href=\"?page=$x\">$x</a></b> " : "<a href=\"?page=$x\">$x</a> ";
                        }
                    }
                ?>

问题是 css 和 php 代码看起来是这样的: https://twitter.com/HassanNSaid/status/320364537477996544/photo/1

如您所见，列没有排列。我尝试改变宽度，但发生的只是一个元素基本上向上移动了一排。

提前致谢

Answer 1

您可能应该为您的 li 元素定义一个宽度。

.item li{
    list-style: none;
    display: inline-block;
    padding: 10px;
    width: 25%; /* this would give you four columns */
}

.item 上的宽度对应于外部容器的宽度...您的 li 元素决定列宽。本质上，您说您希望整个列表占据窗口宽度的 85%。由于您没有为 li 定义宽度，但您确实说过它们应该像内联元素一样工作，因此它们将缩小以适应内部内容(为您提供不同的宽度)。通过指定 li 的宽度，您表示您希望它们都相同。如果一行中的内容大于该宽度，它将结束。