Измените 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, он автоматически подталкивает его к своей собственной линии.