Html/CSS выравнивание текста надписи

Question

Html/CSS выравнивание текста надписи

Я пытаюсь использовать 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 */ }

0

html css alignment directory-tree

Источник

user2405602 14 авг '13 в 14:42

3 ответа

Другие вопросы по тегам html css alignment directory-tree

user3575029 14 авг '13 в 14:49 2013-08-14 14:49 · Answer 1 · 2013-08-14 14:49

Если бы это был я, я бы не структурировал такой код. Но вы все равно можете сделать это с помощью кода, который у вас есть, плюс еще пара диапазонов и следующий 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/

user2667731 14 авг '13 в 15:19 2013-08-14 15:19 · Answer 2 · 2013-08-14 15:19

Я бы использовал таблицу, если бы вы были на вашем месте, это бы упростило ситуацию:

<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 предназначено только для центрирования таблицы на странице.

Надеюсь это поможет.

user2586551 14 авг '13 в 14:56 2013-08-14 14:56 · Answer 3 · 2013-08-14 14:56

В вашем случае вы можете использовать табличные теги.

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

0

Источник

user2586551 14 авг '13 в 14:56