How to align UL items on the same line?

Question

The slider on this link: http://azaz.com.br/blog/ was with the indicators (UL items) aligned, but when I checked to stay dynamic with wordpress, adding the template tags (code below), they misaligned, one above the other.

<?php 

                    $posts_slides = new WP_Query (array(

                        'category_name' => 'Destaques',
                        'posts_per_page' => 3
                    ));

                    $n = 0;
                    while($posts_slides->have_posts()) : $posts_slides->the_post();

                    ?>


                <ul class="nav nav-pills nav-justified">
                    <li data-target="#myCarousel" data-slide-to="<?php echo $n ?>">
                        <a href="#">
                            <?php the_title(); ?>
                        </a>
                    </li>


                </ul>

                <?php $n++; endwhile; wp_reset_postdata(); ?>

I tried to inspect all the elements trying to get a CSS solution and I couldn’t find it. It may be that with different eyes the solution is found. I appreciate the help of you.

Answer 1

Error 1. You are repeating ul in your loop.

• Solution. Repeat only the li in your loop

Error 2. Are you using diplay: table in css.

• Solution: You can use, diplay: inline or flexboxto solve this problem.