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

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