css樹目錄更正

Question

我設法創建目錄樹目錄並有問題。

問題：

1. 子文件夾不在同一列的子文件。

2. 子文件夾的行位於列的最後一個位置。

如何解決呢？

PHP：

function ListFolder($path) { 
     //using the opendir function 
     $dir_handle = @opendir($path) or die("Unable to open $path"); 

     //Leave only the lastest folder name 
     $dirname = end(explode("/", $path)); 

     echo '<ul>'; 

     //display the target folder. 
     echo '<li><a href="'.$dirname.'" class="folder">'.$dirname.'</a>'; 
     echo '<ul>'; 
     while (false !== ($file = readdir($dir_handle))) { 
      if ($file != "." && $file != "..") { 
       if (is_dir($path . "/" . $file)) { 
        //Display a list of sub folders. 
        ListFolder($path . "/" . $file); 
       } else { 
        //Display a list of files. 
        echo '<li><a href="'.$file.'">'.$file.'</a></li>'; 
       } 
      } 
     } 
     echo "</ul>"; 
     echo "</li>"; 

     echo "</ul>"; 

     //closing the directory 
     closedir($dir_handle); 
    } 

    ListFolder("./files"); 

---

這裏是線

CSS：

ul, 
ul ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

ul ul { 
    margin-left:10px; 
    background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%; 
} 

ul li { 
    margin:0; 
    padding:0 12px; 
    font-size:14px; 
    line-height:20px; 
    color:#369; 
    font-weight:bold; 
} 

ul ul li { 
    background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0; 
} 

ul ul li.last, 
ul ul li:last-child { 
    background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%; 
background-position:left top; 
} 

HTML：

<ul> 
    <li><a href="test" class="folder">test</a> 
     <ul> 
      <li><a href="aaa.txt">aaa.txt</a></li> 
      <li><a href="bbb.txt">bbb.txt</a></li> 
      <ul> 
       <li><a href="subfolder" class="folder">subfolder</a> 
        <ul> 
         <li><a href="1.txt">1.txt</a></li> 
         <li><a href="2.txt">2.txt</a></li> 
        </ul> 
       </li> 
      </ul> 
      <li><a href="test.txt">test.txt</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 1

一個標籤是循環，因此重複自我。只需要使用一次。 PHP腳本的

用法：

echo "<ul>"; 
ListFolder("files"); 
echo "</ul>"; 

Answer 2

將background-position:left top;添加到您的list.css文件的第29行。