Html/CSS 对齐标签的文本答案

【问题标题】：Html/CSS aligning the text of a labelHtml/CSS 对齐标签的文本
【发布时间】：2013-08-16 14:07:06
【问题描述】：

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

【问题讨论】：

如果您将所有文本放在
中，则无法做到这一点。按照judgeja 说的做，尝试使用div。