php - 无法按照我想要的方式对齐列表元素

Question

我有一个帖子标题列表，上面有他们的特色图片。列表中的最后一个帖子标题是两行，所以它打乱了列表的对齐方式。下面是一张图片。我希望前三个帖子向上移动以与最后一个对齐。

代码:

<div class="classes-links">
  <?php 
    $args = array(
      'post_type' => 'class',
      'posts_per_page' => 4,
      'order' => 'ASC'
    );

    $query = new WP_Query($args);
  ?>

  <?php while ($query->have_posts()) : $query->the_post(); ?>
    <a href="<?php the_permalink(); ?>">
      <ul><li><?php the_post_thumbnail(); ?></li>
          <li><?php the_title(); ?></li>
      </ul>
    </a>
  <?php endwhile; wp_reset_query(); ?>
</div>

CSS:

.classes-services .classes-div .classes-links {
  display: inline-block;
  float: right;
  position: relative;
  margin: 80px 250px 0 0;
}

.classes-services .classes-div .classes-links a {
  text-decoration: none;
  color: #113337;
}

.classes-services .classes-div .classes-links ul {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}

Answer 1

将 vertical-align: top 给 ul 显示的内联 block ，它应该可以工作