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的宽度，您说要让它们全部相同。如果一行上的内容大于该宽度，它将最终包装。

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

1 个答案: