Currently, I am facing an issue with creating spacing between li elements in a column layout. The problem arises when the last li in the column does not align to the far left edge of the column width. Take a look at the screenshot below for reference:
Below is the code snippet in question:
<li>
<div class="fimg"><a href="<?php the_permalink();?>"><?php the_post_thumbnail('recent-thumbnails'); ?></a></div>
<a class="fimga" href="<?php the_permalink(); ?>"><?php the_title();?></a>
</li>
The corresponding CSS styling is as follows:
.latest-news ul {
}
.latest-news ul li {
display: inline-block;
width: 250px;
height: 230px;
margin-left: 0px;
overflow: hidden;
margin-right: 32px;
}
.latest-news .fimg {
width: 250px;
display: block;
height: 180px;
margin: 0;
overflow: hidden;
padding: 0;
}
Additionally, here is the function that I utilized to fetch the recent posts:
function ensan_LatestNews() {
$rPosts = new WP_Query();
$rPosts->query('showposts=8');
while ($rPosts->have_posts()) : $rPosts->the_post(); ?>
<li>
<div class="fimg"><a href="<?php the_permalink();?>"><?php the_post_thumbnail('recent-thumbnails'); ?></a></div>
<a class="fimga" href="<?php the_permalink(); ?>"><?php the_title();?></a>
</li>
<?php endwhile;
wp_reset_query();
}