0

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

这是我当前的 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

如您所见，列未对齐。我尝试改变宽度，但所发生的只是一个项目基本上向上移动了一行。

提前致谢

4

1 回答 1

0

You should probably define a width for your li elements.

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

The width on .item corresponds to the outer container width...your li elements determine the column width. Essentially, your saying you want the whole list to occupy 85% of the window width. Since you didn't define a width for the li but you did say they should act like inline elements, they will shrink down to fit the inner content (giving you varying widths). By specifying the width of the li, you are saying you want them all to be the same. If the content on a line is greater than that width, it will end up wrapping.

于 2013-04-06T03:21:24.317 回答