編輯最流行的項目在我的主頁

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

從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} 

並且在最後一個李（之前）把明確的類。

感謝&問候 馬諾瑞裏

Answer 2

喜歡的東西，這將有助於：

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