css - 将列中的最后一个 li 向左对齐

Question

我试图在 li 之间留出间距，但问题是列中的最后一个 li 没有 float 到列宽的最大左侧，这是一个屏幕截图:

代码如下:

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

CSS:

.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;
}

这是我用来获取最近帖子的函数:

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();
}

Answer 1

使用 php 每行有 4 个 lis:

$style = ( $i % 4 == 0 ) ? 'class="last-li"' : null;

然后在你的css文件中:

.last-li{margin-left:0 !important;}

请注意，如果您希望设计具有响应性，则必须为 li 留出边距。

无论如何，函数将是:

function ensan_LatestNews () {

    $rPosts = new WP_Query();
    $rPosts->query('showposts=8');
    $i = 0;
          while ($rPosts->have_posts()) : $rPosts->the_post();

       $i++;
       $style = ( $i % 4 == 0 ) ? 'class="last-li"' : null;

      ?>
        <li <?=$style?>>
             <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();
}