PHP Query Results Adds Extra <li></li>

Question

For some reason I am getting an extra <li> </li> at the end of my queried results. How can I prevent this from happening?

<li>
<?php

$counter = 0;
$query = new WP_Query( array( 'post_type' => 'serivces' ) );
while ( $query->have_posts() ) : $query->the_post(); $counter++;
?>
<div class="col-md-4 wp4">

                  <h2 class="text-left"><?php the_title(); ?></h2>
                  <p class="text-left"><?php the_content(); ?></p>
                </div>
<?php 
if ($counter > 0 && $counter % 3 == 0) {
echo '</li><li>';
} 

endwhile;
?>
</li>

Answer 1

You could remove the <li> at the top, and the </li> at the bottom, and just some extra if statements at the beginning of the loop and the end of your code, like so:

<?php

$counter = 0;
$query = new WP_Query( array( 'post_type' => 'serivces' ) );
while ( $query->have_posts() ) :
 $query->the_post();
 $counter++;
 if($counter % 3 == 1) { echo '<li>'; }
?>
 <div class="col-md-4 wp4">
   <h2 class="text-left"><?php the_title(); ?></h2>
   <p class="text-left"><?php the_content(); ?></p>
  </div>
<?php 
 if ($counter > 0 && $counter % 3 == 0) {
  echo '</li>';
 } 
endwhile;

if($counter % 3 != 0) { echo '</li>'; }
?>

The if statement at the bottom only executes if the last if statement inside the while loop didn't occur on an iteration that was a multiple of 3, to ensure that the list element always gets closed.