Question

目前尝试以列表（ul，li）形式在主页上显示我店中最受欢迎的8个项目。问题是，它没有显示内联。看起来很可怕，我似乎可以得到任何CSS来改变它或重新安排PHP代码也无法正常工作。想知道是否有人对我在这里缺少的东西有所了解。

这是php代码：

        <div id="popular-items" class="site-content">
            <div id="popular-links" class="site-content">
            <ul class="popular-list">
                    <li>
                        <div class="popular-im">
                            <?php
                                $args = array( 'post_type' => 'product', 'stock' => 4, 'posts_per_page' => 8, 'orderby' =>'date','order' => 'DESC' );
                                $loop = new WP_Query( $args );
                                while ( $loop->have_posts() ) : $loop->the_post(); global $product;
                            ?>
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?>
                            <h5><?php the_title(); ?></h5>
                            <span class="price"><?php echo $product->get_price_html(); ?></span></a><?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
                                <?php endwhile; ?>
                        </div>
                    </li><!-- /span3 -->
            </ul><!-- /row-fluid -->
            </div>
        </div>

这是css：

#popular-items {
    height: 520px;
    background-color: transparent;
    border: 1px solid #fd0e35;
    position: relative;}

ul.popular-list {
    display: inline-block;
    list-style-type: none !important;
    padding: 0;}

#popular-links {
    height: 400px;
    width: 1102px;
    background-color: transparent;
    border: 2px solid lightgreen;
    position: relative;
    top: 50px;
    margin: 0 auto;
    padding: 0;}

.popular-im {
    left: 400px;
    height: 350px;
    width: 150px;
    margin: 0 0 0 0;
    border: 2px solid black;
    display: inline-block;
    vertical-align: top;
    position: relative;
    text-transform: none;}

Answer 1

这样的事情会有所帮助：

.popular-list{
 list-style-type: none;
 overflow:hidden;
}
.popular-list li{
   display:inline-block;
   float:left;
   height: 350px;
   width: 150px;
}

Answer 2

从UL中删除Inline-block并将其应用于LI，下面应该是您的问题的理想代码，并附有说明，根据您的布局更改高度/宽度。

首先，您可能希望突出显示哪些是受欢迎的项目区域，让我猜测它的宽度约为600像素。

    #popular-list {padding:10px; box-sizing:border-box; width:600px;}

现在让我们定义UL

    ul.popular-list {list-style:none}

最后Li在列中设置。（他们之间有10px排水沟）

    ul.popular-list li {display:inline-block; width:142.5px; margin-right:10px}
    ul.popular-list li:nth-child(4n+4) {margin-right:0}

在最后一段（就在之前）之后立即上课。

谢谢＆amp;问候 Manoj Soni

编辑我主页上最受欢迎项目的显示

2 个答案: