Wordpress相关文章设置 - css吧

level 2

b88104069 楼主

大家好，我想在wordpress显示相关文章，有一个略缩图，下面是文章标题，一行有五个略缩图和文章标题，我写的php代码是：
<br><br>系列文章：<br>
<div id="relate">
<ul id="relate1">
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
$cat = get_category( $cats[0] );
$first_cat = $cat->cat_ID;
$args = array(
'category__in' => array($first_cat),
'post__not_in' => array($post->ID),
'showposts' => 5,
'caller_get_posts' => 1);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li><?php the_post_thumbnail(array(100,100)); ?></li>
<?php endwhile; else : ?>
<li>暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>
<ul id="relate2">
<?php
$cats = wp_get_post_categories($post->ID);
if ($cats) {
$cat = get_category( $cats[0] );
$first_cat = $cat->cat_ID;
$args = array(
'category__in' => array($first_cat),
'post__not_in' => array($post->ID),
'showposts' => 5,
'caller_get_posts' => 1);
query_posts($args);
if (have_posts()) :
while (have_posts()) : the_post(); update_post_caches($posts); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else : ?>
<li>暂无相关文章</li>
<?php endif; wp_reset_query(); } ?>
</ul>
</div>
css代码是：
#relate{
line-height: 0px;
}
#relate1 li{
list-style:none;
text-align:left;
display:inline;
padding: 0;
margin: 0;
width:100px;
}
#relate2 li{
list-style:none;
display:inline-block;
width:100px;
line-height: 100%;
}
结果不是很理想，我要设两段同样的html代码才能一行是略缩图，一行是文章标题，而且出来的效果标题是垂直置中对齐，我希望是垂直靠上对齐，这样比较接近略缩图，请问该怎么修改？

2015年08月06日 20点08分 1