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

Question

I have a list of post titles with their featured image above it. The last post title in the list is two lines, so it messes up the alignment of the list. Below is an image. I want the first three posts to move upwards to align with the last one.

The code:

<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

You could put them in a table and set valign:top; on the tr element. If you use percentage based width for the table and the td elements, it will flex fine if your application is responsive.

This will align the images to the top instead of middle aligning the text and image.