Question

我尝试使用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 */ }

Answer 1

如果是我，我不会像那样构建代码。但你仍然可以使用你已经获得的代码以及更多的跨度和以下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/

Answer 2

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

<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>

保证金：0自动只是将表格置于页面中心。

希望这会有所帮助。

Answer 3

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

 <ol>
    <li>
        <table>
            <tr>
                <td>File1</td>
                <td>8MB</td>
                <td>01/12/2010</td>
            </tr>
        </table>
    </li>
</ol>

Html / CSS对齐标签的文本

3 个答案: