Поддержка Проблемы и решения Бегущая строка без переноса строк

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

    <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 часа как ни пытаюсь, все новости бегают хором, как заставить их бежать по одному, по очереди в одной строке?

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