编辑最流行的项目在我的主页

显示目前正试图从一个列表（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;}

来源

2016-03-07 Tobi Ajala

从UL删除内联块，并将其应用到李，下面应该是你的问题的理想代码，解释，根据您的布局更改高度/宽度。

首先，你可能想突出区域什么是流行的项目，让我猜大约是600px的宽度。

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

现在让我们在列定义UL

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

最后李设置。（在它们之间有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}

并且在最后一个李（之前）把明确的类。

感谢&问候马诺瑞里

来源

2016-03-08 06:55:05

，完美的工作！非常感谢你！ –

喜欢的东西，这将有助于：

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

来源

2016-03-07 22:29:08 Khesayed

这实际上只是造成整个列表中消失 –

编辑最流行的项目在我的主页

回答

相关问题