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

【问题标题】：Change the CSS to the most popular items on my homepage将 CSS 更改为我主页上最受欢迎的项目
【发布时间】：2016-06-22 04:21:59
【问题描述】：

我有一个 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;

}

【问题讨论】：

您是否尝试为您的元素使用任何 css 样式，这会很容易吗？第一个解决方案：父元素使用position:relative，子元素使用position:absolute，调整属性top，left就可以了
请也包含你的css
我已经添加了 css :)

标签： css arrays wordpress placeholder

【解决方案1】：

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

例如：

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

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

在没有实际 HTML 的情况下无法提供关于将价格等下调的建议，但将某些内容设置为 display: block 会自动将其推送到自己的行上。

【讨论】：