将CSS更改为我主页上最受欢迎的项目

Question

我有一个div显示主页上商店中最受欢迎的8个项目。但我无法弄清楚如何在它们之间产生差价并获得价格并添加到篮子按钮以显示在图像标题下方。 see image of what it looks like now here

有什么建议吗？

这是php代码：

<div class="popular-im">
  <?php $args=a rray( 'post_type'=>'product', 'stock' => 4, 'posts_per_page' => 4, '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="190px" height="190px" margin="100px" />'; ?>
    <span class="price"><?php echo $product->get_price_html(); ?></span>
  </a>
  <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
  <?php endwhile; ?>
</div?

我唯一的css：

ul.popular-list li {
width: 1100px;
display: inline-block;
border: 2px solid black;
margin: 0px;

}

Answer 1

您已将列表项的margin属性设置为0px。您需要指定要“推”它们的方向。

例如：

ul.popular-list li{
    margin-right: 10px;
}

将使每个项目将其邻居10px推向右侧（您可能希望在最后一项上删除此效果，以使间距相等）。

无法提供有关移动价格等的建议，而无需查看实际的HTML，但将内容设置为display: block会自动将其推送到自己的行。