首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在生成的PHP/CSS树视图中,如何将输入保存在列中?

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

Stack Overflow用户
提问于 2018-07-25 03:10:55
回答 3查看 129关注 0票数 0

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

然而,这并不是我想要达到的效果。我想保持复选框在列中对齐,而标签在交错列表中表示权限级别。这是生成树的函数:

代码语言:javascript
运行
复制
<?
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的样式为当前样式:

代码语言:javascript
运行
复制
.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输出如下:

应该对哪些内容进行编辑才能使复选框输入在列中对齐,同时错开标签?

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

EN

Stack Overflow用户

发布于 2018-07-25 03:34:49

在php回显中,将样式更改为padding:0。

代码语言:javascript
运行
复制
<?
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>';
}
?>
票数 0
EN
查看全部 3 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51505975

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档