0

我尝试使用 html+CSS 来呈现目录树结构。我缺少的是如何在特定的水平位置对齐每个文件的大小和数据。

这可能会被清除你看看下面的代码。在第 10 行有“File1 8MB 01/12/2010”。如何将“8MB”对齐到中心，将“01/12/2010”对齐到右侧？

在 html 之后，我附上 CSS 以防万一。我是新手，所以感谢您的帮助和耐心。

<body>
<div>
                                            Size                        Date
</div>

    <ol class="tree">
        <li>
            <label for="folder1">Folder1</label> <input type="checkbox" checked disabled id="folder1" /> 
            <ol>
                <li class="file">File1 8MB 01/12/2010</li>
                <li>
                    <label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" /> 
                    <ol>
                        <li class="file">File1 8MB 01/12/2010</li>
                        <li>
                            <label for="subsubfolder1">Subfolder1</label> <input type="checkbox" id="subsubfolder1" /> 
                            <ol>
                                <li class="file">File2 8MB 01/12/2010</a></li>
                                <li>
                                    <label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" /> 
                                    <ol>
                                        <li class="file">Subfile1 8MB 01/12/2010</li>
                                        <li class="file">Subfile2 8MB 01/12/2010</li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                        <li class="file">File3 8MB 01/12/2010</li>
                        <li class="file">File4 8MB 01/12/2010</li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>

</body>

这是 CSS 以防万一：

/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }

body, form, ul, li, p, h1, h2, h3, h4, h5
{
    margin: 0;
    padding: 0;
}
body { background-color: #606061; color: #ffffff; margin: 0; }
img { border: none; }
p
{
    font-size: 1em;
    margin: 0 0 1em 0;
    white-space: pre
}
div{white-space: pre-wrap;}

html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }

/* CSS Tree menu styles */
ol.tree
{
    padding: 0 0 0 30px;
    width: 900px;
}
    li 
    { 
        position: relative; 
        margin-left: -15px;
        list-style: none;
    }
    li.file
    {
        margin-left: -1px !important;
    }
        li.file a
        {
            background: url(document.png) 0 0 no-repeat;
            color: #fff;
            padding-left: 21px;
            text-decoration: none;
            display: block;
        }

    li input
    {
        position: absolute;
        left: 0;
        margin-left: 0;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;
    }
        li input + ol
        {
            background: url(toggle-small-expand.png) 40px 0 no-repeat;
            margin: -0.938em 0 0 -44px; /* 15px */
            height: 1em;
        }
        li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
    li label
    {
        background: url(folder-horizontal.png) 15px 1px no-repeat;
        cursor: pointer;
        display: block;
        padding-left: 37px;
    }

    li input:checked + ol
    {
        background: url(toggle-small.png) 40px 5px no-repeat;
        margin: -1.25em 0 0 -44px; /* 20px */
        padding: 1.563em 0 0 80px;
        height: auto;
    }
        li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
        li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
4

3 回答 3

3

如果是我，我不会这样构造代码。但是您仍然可以使用您拥有的代码加上更多的 span 和以下 CSS（使用绝对定位）来做到这一点：

HTML 示例：

<ol>
    <li class="file">
        <span class="leftPos">File1</span> 
        8MB 
        <span class="rightPos">01/12/2010</span>
    </li>
</ol>

CSS

li { 
    position: relative;
    display: block;
    text-align: center; }

li span.rightPos { position:absolute; right:0; }
li span.leftPos { position:absolute; left:0; }

小提琴：http: //jsfiddle.net/ntqJd/

于 2013-08-14T14:49:36.810 回答
1

如果我是你，我会使用一张桌子，它会让事情变得更简单：

<html>
<head>
<style>
    table {
        width: 400px;
        margin: 0 auto;
    }
    .centerText {
        text-align: center;
    }
</style>
</head>
<body>
<table>
    <tr>
        <th></th>
        <th>Size</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>File 1</td>
        <td class="centerText">5MB</td>
        <td class="centerText">01/12/2010</td>
    </tr>
</table>
</body>
</html>

margin: 0 auto 只是为了使表格在页面中居中。

希望这可以帮助。

于 2013-08-14T15:19:22.890 回答
0

在您的情况下，您可以使用表格标签。

 <ol>
    <li>
        <table>
            <tr>
                <td>File1</td>
                <td>8MB</td>
                <td>01/12/2010</td>
            </tr>
        </table>
    </li>
</ol>
于 2013-08-14T14:56:48.917 回答