将列中的最后一个li对齐到左侧(Align last li in the column to the left)

将列中的最后一个li对齐到左侧(Align last li in the column to the left)

我试图在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(); }

I'm trying to make spacing between li's, but the problem that the last li in the column doesn't float to the maximum left of the column width, Here's a screenshot:

and here's the code:

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

and here's the function I used to get 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(); }

最满意答案

你使用php每行4个lis：

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

然后在你的css文件中：

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

请注意，如果您希望设计具有响应性，则必须向左边提供保证金。

无论如何，这个功能将是：

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

You have 4 lis per line using php :

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

Then in your css file :

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

Be aware that if you want the design to be responsive you have to give the li the margin left back.

Anyway the function will be:

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