Бегущая строка без переноса строк

Здравствуйте! Реализовал вывод новостей в области виджета таким образом :

<div class="marqueeposts" ><?php
// запрос
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); ?>

<?php if ( $wpb_all_query->have_posts() ) : ?>

<ul>

	<!-- the loop -->
	<div class="marquee"><?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
		<nobr><li><span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></li></nobr>
	<?php endwhile; ?></div>
	<!-- end of the loop -->

</ul>

	<?php wp_reset_postdata(); ?>

<?php else : ?>
	<p><?php _e( 'Извините, нет записей, соответствуюших Вашему запросу.' ); ?></p>
<?php endif; ?></div>

Через css «заставил» двигаться таким образом :

marquee{
width:100%;
white-space:nowrap;
overflow:hidden;
}
 
.marquee span {
color:#212121;
font-size:25px;
display:inline-block;
padding-left:100%;
-webkit-animation: marquee 10s infinite linear;
animation: marquee 10s infinite linear;
}
 
@-webkit-keyframes marquee {
0%{-webkit-transform: translate(0, 0);}
100%{-webkit-transform: translate(-100%, 0);}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}

Но беда в том, что 3 часа как ни пытаюсь, все новости бегают хором, как заставить их бежать по одному, по очереди в одной строке?

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]