dsqa6272
2018-07-24 19:10 阅读 52
已采纳

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

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

enter image description here

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:

enter image description here

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: enter image description here

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    dongmeixi5311 dongmeixi5311 2018-07-24 19:23

    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
    }
    
    点赞 评论 复制链接分享
  • douwa6220 douwa6220 2018-07-24 19:16

    Add ul outside function

    function genTree($tree)
    {
      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>';
      }
    }
    
    function newfunc($tree){
      echo '<ul class="treeview">';
      genTree($tree)
      echo '</ul>';
    }
    

    Now call newfunc() where you want to add respective html

    点赞 评论 复制链接分享
  • duanli8391 duanli8391 2018-07-24 19:34

    Inside your php echo, change the style to padding-left:0.

    <?
    function genTree($tree)
    {
        echo '<ul class="treeview">';
    
        foreach($tree as $arr)
        {
            echo '<li>';
                echo '<input style='padding-left:0;' 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>';
    }
    ?>
    
    点赞 评论 复制链接分享

相关推荐