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

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，它应该可以正常工作

Answer 2

你可以把它们放在桌子上并设置valign：top;在tr元素上。如果对表和td元素使用基于百分比的宽度，如果应用程序响应，它将会很好地弯曲。

这会将图像对齐到顶部而不是中间对齐文本和图像。