Как показать 4 <li> в одном ряду, а остальные 4 <li> в другом [дубликаты]

Использовать float: left; вместо display: inline, затем добавьте новое правило, которое делает clear: left каждый 4-й элемент <li>.

HTML:

<div id="photo_block" style="border:2px dotted <?echo $color;?>; height:1000px;" >

  <ul class="items">
    <? while ($item=$select_items->fetch()): ?>

    <li>
        <div class="item_block">
            <img src="<?echo $item['src']?>">
        </div>
    </li>

    <? endwhile ?>
  </ul>

</div>

CSS:

#photo_block{
    width:800px;
}
.items li{
    float: left;
}
.items li:nth-child(4n)
{
    clear: left;
}
.items li .item_block img{
    width: 100px;
    height: 100px;
}

Почему вы создаете новый список с одним элементом для каждого отдельного изображения? Я бы вообще не использовал список и просто помещал их в div four за раз, затем масштабировал изображения до (чуть ниже) 25%.

<div class='imagerow'>
<?
    $i = 0;
    while ($item=$select_items->fetch()) {
      if($i > 0 && $i % 4 == 0) {
?>
</div>
<div class='imagerow'>
<?
      } // end if
?>
 <img src="<?echo $item['src']?>">
<?
   } // end while
?>
</div>

с CSS

.imagerow img { width: 24.75%; }

где ширина не превышает 25%, потому что опыт подсказывал мне, что если вы возьмете ровно 25%, последний из них все еще переполняется на следующую строку.

HTML

<div id="photo_block" style="border:2px dotted <?echo $color;?>; height:1000px;" >
<ul class="items">
   <? while ($item=$select_items->fetch()) { ?>
    <li>
      <div class="item_block">
         <img src="<?echo $item['src']?>">
       </div>
    </li>
   <? } ?>
</ul>
</div>

CSS

#photo_block{
    width:500px;
}
.items li{
    width:100px;
    margin-right:5px;
    float: left;
    list-style: none;
}
.items li .item_block img{
    width: 100px;
    height: 100px;
}