在生成的PHP / CSS树视图中，如何将输入保留在列中？

Question

I have a simple tree view being generated for my Access Control List:

However, this isn't quite the effect I'm trying to achieve. I would like to keep the checkboxes aligned in a column, while the labels represent the permission levels in a staggered list. This is the function that generates the tree:

<?
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>';
}
?>

And the CSS to style as it currently stands:

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

The rendered HTML outputs as this:

What should be edited to keep the checkbox inputs lined up in a column, while staggering the labels?

The final goal I'm trying to achieve will look at least close to this:

Answer 1

You may be able to use absolute or relative positioning on the checkboxes to keep them to the left, like this:

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
}