在生成的PHP/CSS树视图中，如何将输入保存在列中？
在生成的PHP/CSS树视图中，如何将输入保存在列中？
提问于 2018-07-25 03:10:55
我为我的访问控制列表生成了一个简单的树视图：
然而，这并不是我想要达到的效果。我想保持复选框在列中对齐，而标签在交错列表中表示权限级别。这是生成树的函数：
<?
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输出如下：
应该对哪些内容进行编辑才能使复选框输入在列中对齐，同时错开标签？
我试图实现的最终目标看起来至少接近于：
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-25 03:23:22
您可以在复选框上使用绝对或相对定位，使其保持在左侧，如下所示：
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
}Stack Overflow用户
发布于 2018-07-25 03:16:40
在函数外部添加ul
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>';
}现在调用newfunc()，在其中添加相应的html
Stack Overflow用户
发布于 2018-07-25 03:34:49
在php回显中，将样式更改为padding: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>';
}
?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51505975
复制相关文章
相似问题