我想将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上的宽度对应于外部容器width...your li元素确定列宽。从本质上讲，你说你想让整个列表占据85%的窗口宽度。由于您没有为li定义宽度，但是您确实说过它们应该像内联元素一样工作，所以它们将缩小以适应内部内容(给您不同的宽度)。通过指定li的宽度，您表示希望它们都是相同的。如果一行上的内容大于该宽度，它将结束换行。