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

ご覧のとおり、列は整列していません。幅を変更してみましたが、基本的に項目が 1 行上に移動しただけです。

前もって感謝します

4

1 に答える 1

0

おそらく、li要素の幅を定義する必要があります。

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

.item上の幅は外側のコンテナーの幅に対応します...li要素によって列の幅が決まります。基本的に、リスト全体がウィンドウ幅の 85% を占めるようにしたいと言っています。の幅を定義しなかったliが、インライン要素のように動作する必要があると言ったため、内部コンテンツに合わせて縮小されます (幅が変化します)。の幅を指定することで、liすべて同じにしたいということです。行のコンテンツがその幅よりも大きい場合は、折り返されます。

于 2013-04-06T03:21:24.317 に答える