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

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

Answer 2

我认为第n个是最好的方式。

.latest-news ul li：nth-child（2n）{

}

了解更多信息，请参阅此链接 CSS Tricks

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

2 个答案: