如何风格这个名单，使之看起来像一个金字塔

Question

我的数组：

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; 
} 

它所产生：

<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名儿童，问题是：如何样式此列表，使它看起来像一个金字塔，使每一个父节点（相对于孩子的）出现在他们中间的顶部，如上图所示？无论深度级别如何，也许我需要在渲染函数中进行一些计算以在每个级别上进行偏移？但是如何实现？

Answer 1

这是我想尝试。你可能需要调整一下输出，看看它是否适合你。

$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;