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

Question

我正在尝试在 li 之间设置间距，但是列中的最后一个 li 没有浮动到列宽的最大左侧，这是一个屏幕截图：

这是代码：

<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

你每行有 4 个 lis 使用 php :

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

Answer 2

我觉得第n种方法最好

.latest-news ul li:nth-child(2n) {

}

有关详细信息，请参阅此 link CSS Tricks

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

Align last li in the column to the left

css

html

wordpress-theming

html-lists