潜在目录列表的CSS显示

Question

我正在尝试创建一个页面，显示将在用户创建新项目时创建的子目录列表。我有以下代码显示默认目录，但我更喜欢的是子目录文本更加集中对齐到faux目录叶线，例如alignment＆＃34; - dir＆＃34;文本是该行的核心。

代码如下：

＆＃13;

＆＃13;

.file-root {
    position: relative;
    display: inline-block;
}

.file-leaf {
	display: block;
    margin-left: 1em;
    margin-bottom: 0.25em;
    width: 1em;
    height: 90%;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-bottom-left-radius: 0.5em;
}

.file-leaf-label {
    margin-left: 1em;
	text-align: bottom;
}

＆＃13;

<div class="container-fluid">

    <div class="file-root">
        <div class="row">
            Root
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Animations
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Audio
                </div>
            </div>

        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Documents
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Media
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我不确定如何将文本的对齐方式放在子目录叶线的中心。我不介意使用已经执行此操作的css和/或js库，如果这是一个更好的解决方案。我已经在使用jquery，bootstrap和font awesome。

Answer 1

试试这个。 我刚刚添加了.file-leaf-label：

margin-bottom: -20px;
padding : 10px;

＆＃13;

＆＃13;

.file-root {
    position: relative;
    display: inline-block;
}

.file-leaf {
	display: block;
    margin-left: 1em;
    margin-bottom: 0.25em;
    width: 1em;
    height: 90%;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-bottom-left-radius: 0.5em;
}

.file-leaf-label {
    margin-left: 1em;
	text-align: bottom;
    margin-bottom: -20px;
    padding : 10px;
}

＆＃13;

<div class="container-fluid">

    <div class="file-root">
        <div class="row">
            Root
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Animations
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Audio
                </div>
            </div>

        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Documents
                </div>
            </div>
        </div>
        <div class="row">
            <div class="file-leaf">
                <div class="file-leaf-label">
                    Media
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;