Php 如何设置此列表的样式以使其看起来像金字塔
我的阵列：Php 如何设置此列表的样式以使其看起来像金字塔,php,html,css,Php,Html,Css,我的阵列： array ( array( ['name'] => 'test1', ['level'] => 1 }, array( ['name'] => 'test2', ['level'] => 2 }, array( ['name'] => 'test3', ['le
array (
array(
['name'] => 'test1',
['level'] => 1
},
array(
['name'] => 'test2',
['level'] => 2
},
array(
['name'] => 'test3',
['level'] => 2
},
array(
['name'] => 'test4',
['level'] => 3
},
array(
['name'] => 'test5',
['level'] => 3
},
array(
['name'] => 'test6',
['level'] => 3
},
array(
['name'] => 'test7',
['level'] => 3
},
)
________
| |
| test1 |
|________|
________ ________
| | | |
| test2 | | test3 |
|________| |________|
________ ________ ________ ________
| | | | | | | |
| test4 | | test5 | | test6 | | test7 |
|________| |________| |________| |________|
public static function f($rows)
{
$str = '';
$level = 0;
$first_li_mode = true;
foreach ($rows as $row) {
if ($level > $row['level']) {
$str .= '</li></ul>' . "\n";
$str .= '</li><li><a href="#">' . $row['name'] . '</a>' . "\n";
$first_li_mode = true;
} elseif ($row['level'] > $level) {
$str .= '<ul><li><a href="#">' . $row['name'] . '</a>' . "\n";
$first_li_mode = false;
;
} else {
if (!$first_li_mode) {
$str .= '</li>' . "\n";
} else {
$first_li_mode = false;
}
$str .= '<li><a href="#">' . $row['name'] . '</a>' . "\n";
}
$level = $row['level'];
}
while ($level > 0) {
$str .= '</li></ul>' . "\n";
$level--;
}
return $str;
}
公共静态函数f（$rows）
{
$str=''；
$level=0；
$first_li_mode=true；
foreach（$行作为$行）{
如果（$level>$row['level']））{
$str.=''。“\n”；
$str.='“\n”；
$first_li_mode=true；
}elseif（$row['level']>$level）{
$str.='- “\n”；
$first_li_mode=false；
;
}否则{
如果（！$first\u li\u模式）{
$str.='
'。“\n”；
}否则{
$first_li_mode=false；
}
$str.='- '。“\n”；
}
$level=$row['level']；
}
而（$level>0）{
$str.='
'。“\n”；
$level--；
}
返回$str；
}
<ul>
<li class="level_1">
<a href="#">
test1
</a>
<ul>
<li class="level_2">
<a href="">test2</a>
</li>
<li class="level_3">
<a href="">test3</a>
</li>
</ul>
</li>
</ul>
-
-
-
以此类推，假设每个父节点在此列表中都有2个子节点，问题是：如何设置此列表的样式，使其看起来像一个金字塔，使每个父节点（相对于子节点）都显示在两者的中间上方，如上图所示？不管深度级别如何，可能我需要在渲染函数中进行一些计算，以便对每个级别进行偏移，但如何进行偏移？这是我将尝试的。您可能需要稍微调整一下输出，看看它是否适合您
$sorted_arr=array();
foreach ($arr as $a){
$sorted_arr[$a['level']][]=$a['name']
}
ksort($sorted_arr);
$css="";
foreach ($sorted_arr as $level => $s){
$count=count($s);
// First count the number of elements in each level.
$spacing=1/($count+1)*100-5;
// Get the percentage of the offset, then minus the 1/2 width of each li element ( say 10% )
$css.=".level_$level li {margin-left:".$spacing."%; width:10%} \n";
}
echo $css;
我不知道如何计算孩子们的偏移量，你能告诉我如何在我的循环中计算它吗？在这种情况下，我只需要一些css帮助，我尝试过：左边距：（$row['level']*20）px；，但这对我不起作用，有什么想法吗？我只是不知道如何正确地设计它。你需要计算每个级别的项目数量，然后计算从那里的偏移量。最好在CSSY中使用百分比您可能最好在父元素上设置
文本对齐：居中