使用li标签垂直创建菜单列表

Question

我想使用基本的li标签创建类似的东西。因此，想要创建一个垂直显示的列表，并在第一行填充时弹出到下一行。

$row_max = 10;
echo '<ul>';
foreach($items as $item) {
    echo "<li class='vertical'>$item</li>";
}
echo '</ul>';

用我的CSS：

.vertical {
    float: left;
}

它显然没有做我想要的，我不知道如何使用我的$row_max告诉它在第一行10个元素后移动到下一行，是新的我无法想象我怎么能做我需要的结果...有关哪条路径的建议？我并不特别需要一个答案，我知道你们很忙，只是想找些什么来回答我的问题。

Answer 1

你也许可以使用css columns规则集〜它不依赖于高度所以如果有20或200个li项目它将相应地增长超过min-height

    <style>
            ul{
                width:60%;
                min-height:200px;
                float:none;
                margin:auto;
                list-style:none;
                column-count: 4;
                column-width:25%;
                column-gap:1rem;
                column-rule: 1px solid gray;
                box-sizing:border-box;
            }
        </style>

提出一个想法......

<?php
    echo "<ul>";
    for( $i=0; $i < 141; $i++ )echo "<li>List item $i</li>";/* any number...*/
    echo "</ul>";
?>

为了更接近问题中描绘的图像，列表项的布局存在一定程度的随机性。实际的布局将由记录集和PHP中的一些逻辑控制，但下面只是模拟它可能是什么样子。

<style>
        ul{
            font-family:calibri,verdana,arial;
            width:60%;
            min-height:200px;
            float:none;
            margin:auto;
            list-style:none;
            column-count: 4;
            column-width:25%;
            column-gap:1rem;
            column-rule: 1px solid gray;
            box-sizing:border-box;
        }
        h4{
            border-top:1px dotted gray;
            margin:0.5rem 0 1rem 0;
            padding:0.25rem 0 0 0;
            color:gray;
        }
    </style>

<?php

    $j=0;

    echo "<ul>";
    for( $i=0; $i < 100; $i++ ){


        echo "<li>List item $i</li>";

        if( $i > 0 && ( $i % rand(3,19) == 0 or $i % rand(12,23) == 0 ) ){
            $j++;
            echo "<h4>Category $j</h4>";
        }
    }
    echo "</ul>";

?>

---

有一点玩javascript - 也许有点进步但没有完全解决问题，但也许以下可能提供一点指导（也许不是）

一些基本的CSS

<style>
    ul{
        font-family:calibri,verdana,arial;
        width:60%;
        min-height:50vh;
        max-height:100vh;
        height:auto;
        float:none;
        margin:auto;
        list-style:none;
        column-count: 4;
        column-width:25%;
        column-gap:1rem;
        column-rule: 1px solid gray;
        box-sizing:border-box;
    }

    .breaker{
        font-weight:bold;
        font-size:1.25rem;
        text-decoration:underline;
        border-top:1px dotted gray;
        padding:0.25rem 0 0 0;
        color:gray;
    }

    .breaker:first-of-type{
        border-top:1px solid transparent;
    }
    .breaker:last-of-type{
        border-bottom:2px solid dashed;
    }
</style>

一个小PHP来模拟你的菜单系统

<?php
    $j=0;
    $limit=rand(10,150);

    $html=array();
    $html[]="<ul id='menu'>";
    for( $i=0; $i < $limit; $i++ ){
        if( $i >= 0 && ( $i % rand(3,19) == 0 or $i % rand(12,23) == 0 ) ){
            $j++;
            $html[]="<li data-cat=$j class='breaker'>Category $j</li>";
        }
        $html[]="<li data-cat=$j>List item $i</li>";
    }
    $html[]="</ul>";
    echo implode( PHP_EOL, $html );
?>

我尝试使用getBoundingClientRect()方法来确定元素的左侧位置是否已从前一个元素更改。它或多或少地检测到断裂应该发生的位置（或者一个版本），但它是产生断裂的最终行为。在使用列布局时，有一些css技巧可以强制破坏，但是支持看起来很粗略，我尝试过的任何东西都没有取得任何成功.....

<script>
    let cat,left=false;
    let tmp={};

    let i=j=0;
    let n=p=false;

    Array.prototype.slice.call( document.querySelectorAll( 'ul#menu li.breaker' ) ).forEach( function( li, index ){
        if( index > 0 ){
            cat=parseInt( li.dataset.cat );
            left=parseInt( li.getBoundingClientRect().left );

            i=0;
            j=0;
            n = li.nextSibling;
            p = n.previousSibling;

            while( n && n.nodeType==1 && !n.classList.contains( 'breaker' ) ){
                if( parseInt( n.getBoundingClientRect().left ) > left ) i++;
                n = n.nextSibling;
                j++;
            };

            if( n && n.nodeType==1 && i > 0 && j > 0 ) tmp[cat]=j+1;
            return;
        }
    });


    const insertbreaks=function(i){
        let oFrag=document.createDocumentFragment();
        for( var a=0; a < i; a++ )oFrag.appendChild( document.createElement('br') );
        return oFrag;
    };


    let keys=Object.keys( tmp );
    let vals=Object.values( tmp );

    for( i=keys.length-1; i >= 0; i-- ){
        let parent=document.querySelector('li[ data-cat=\"'+keys[ i ]+'\" ]');
        parent.parentNode.insertBefore( insertbreaks( vals[ i ] ), parent );
    }
</script>

Answer 2

尝试使用flexbox。

ul{
  display:flex;
  flex-direction: column;
  max-height: 6em;
  flex-wrap: wrap;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Answer 3

如果它基于高度而不是每行中的结果数，你可以使用flexbox来实现这一点。

ul {
   display: flex;
   flex-direction:column;
   flex-wrap: wrap;
   height: 100px;
}

如果你是根据最大行进行的，我会建议在循环中计算lis，如果结果是row_max的倍数和新的ul以及接下来的10个结果。