PHP glob在foreach循环中返回神秘的html元素

Question

好的，没有进入很多细节，我正在使用glob从文件夹中返回图像。在我做一个foreach循环文件内容并将它们添加到带有li元素的无序列表之后，但是正在发生的是foreach返回正确的图像并在其间添加一个空的li元素，破坏了ul.grid。

            <ul class="small-block-grid-1 medium-block-grid-4">
            <?php 
        $files = array();
        $files = glob('images/01/*.png'); // get all file names
        if(!empty($files)){
        natsort($files);
        $i = 0;
            foreach($files as $file){ // iterate files
              $i++;
              if(is_file($file))
                echo '<li class="floatiholder"> 
                      <span class="floati"> '.$i.' </span> 
                      <img src="'.$file.'" id="img'.$i.'"> 
                      <li>'; 
                }   
        }
        ?>
        </ul>

我正在使用Zurb Foundation 5这样的类（small-block-grid-1和medium-block-grid-4），基本上只是对ul中的元素进行排序。

当我运行代码时，这就是正在发生的事情：

在从数据库读取之前我已经生成了这样的ul并且我从来没有遇到过问题，但这是我第一次使用glob，所以我怀疑它与它有关并且我无法查明它。

我可以提供的任何其他信息让我知道，我很乐意发布：）。

Answer 1

您没有结束li元素</li>。相反，您正在打开另一个<li>，它在浏览器中渲染效果不佳。

有时浏览器会尝试纠正问题，但拥有正确的HTML是最安全的选择，并且不会留下任何可供浏览器解释的内容。

这是正确的代码：

echo '<li class="floatiholder"> 
        <span class="floati"> '.$i.' </span> 
        <img src="'.$file.'" id="img'.$i.'"> 
      </li>';