潜在目录列表的CSS显示

Question

我试图创建一个显示子目录列表的页面，该目录将在用户创建新项目时创建。 我有以下显示默认目录的代码，但是我更希望子目录文本与伪目录叶子行更加集中地对齐，例如对齐“-dir”，其中文本位于该行的中心。

代码如下：

 .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; } 

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

我不确定如何使文本居中对齐到子目录叶行。 如果那是一个更好的解决方案，我不介意使用已经做过的CSS和JS库。 我已经在使用jquery，bootstrap和fonts了。

Answer 1

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

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

 .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; } 

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