php - 在生成的 PHP/CSS TreeView 中，如何将输入保留在列中？

Question

我为我的访问控制列表生成了一个简单的 TreeView :

但是，这并不是我想要达到的效果。我想让复选框在一列中对齐，而标签代表交错列表中的权限级别。这是生成树的函数:

<?
function genTree($tree)
{
    echo '<ul class="treeview">';

    foreach($tree as $arr)
    {
        echo '<li>';
            echo '<input type="checkbox" id="'.$arr['name'].'" name="permission[]" value="'.$arr['id'].'"></input>';
            echo '<label for"'.$arr['name'].'">'.ucfirst($arr['name']).'</label>';
            if (isset($arr['children']) && count($arr['children']) > 0)
            {       
                genTree($arr['children']);  
            }
        echo '</li>';
    }
    echo '</ul>';
}
?>

以及当前样式的 CSS:

.treeview {
    margin: 5px 0 0 0;
    list-style: none;
}

.treeview li {    
    padding: 0px 0 2px 16px;
}


.treeview li > input {
    height: 16px;
    width: 16px;
    margin: 0px 0 0px -26px;
}

.treeview li > label { /* move left to cover the original checkbox area */
    margin-left: 15px;
}

呈现的 HTML 输出如下:

应该编辑什么以保持复选框输入在一列中排列，同时交错标签？

我试图实现的最终目标至少看起来接近于此:

Answer 1

您可以在复选框上使用绝对或相对定位，使它们保持在左侧，如下所示:

input.checkbox{
    position: absolute; or position: relative; // depending on the rest of your code, the container this is in, etc.
    left: 0px; // this will force them all to the left side equally
    margin-top: 10px; // this will keep them moving down the page with space between, should be the height of the li
}