使用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

嘗試使用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 2

如果flexbox基於高度而不是基於每一行的結果數，則可以使用flexbox來實現這一目標。

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

如果您基於最大行數來執行此操作，我建議您在循環中計算lis，並且如果結果是row_max的倍數以及下一個10個結果中的新ul。

Answer 3

您也許可以使用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>