我为我的访问控制列表生成了一个简单的树视图:
然而,这并不是我想要达到的效果。我想保持复选框在列中对齐,而标签在交错列表中表示权限级别。这是生成树的函数:
<?
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输出如下:
应该对哪些内容进行编辑才能使复选框输入在列中对齐,同时错开标签?
我试图实现的最终目标看起来至少接近于:
发布于 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
}
发布于 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
发布于 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>';
}
?>
https://stackoverflow.com/questions/51505975
复制相似问题