CSS 嵌套列表作為表格？

Question

我有以下列表結構：

<ul class="clientlist">
    <li class="clientname">
        <span class="id">IDxxx</span><span class="name">Hugo</span><span class='clientcount'>15</span>
        <ul class="fbllist">
            <li class="fbladdress">
                <span class="address">hugo@do.main</span><span class="fblcount">15</span>
                <ul class="iplist">
                    <li class="ipstatus">
                        <span class="statustext">active</span><span class="statuscount">15</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

由於 CSS 之類的，它顯示得很好：

• IDxxx：雨果 (15)
  • hugo@do.main (15)
    • 活躍：15

當然有幾個這樣的元素，所以一個列表可能是這樣的：

• IDxx1：雨果 1 (15)
  • hugo@do.main (15)
    • 活躍：15
• IDxx2：雨果 2 (14)
  • hugo2@do.main (14)
    • 活躍：11
    • 監控：3
• IDxx3: Hugo3 (15)
  • hugo3@do.main (15)
    • 失敗：15
• IDxx4：雨果4 (15)
  • hugo4@do.main (15)
    • 活躍：15

現在我試圖找到一種方法來格式化這個更像“表格”並嘗試這個 css

 ul { display: table; } li { display: table-row; } li span { display: table-cell; } span.ipcount, span.clientcount, span.statuscount { text-align: right; }

 <ul class="clientlist"> <li class="clientname"> <span class="id">IDxxx</span><span class="name">Hugo</span><span class='clientcount'>15</span> <ul class="fbllist"> <li class="fbladdress"> <span class="address">hugo@do.main</span><span class="fblcount">15</span> <ul class="iplist"> <li class="ipstatus"> <span class="statustext">active</span><span class="statuscount">15</span> </li> </ul> </li> </ul> </li> </ul>

不幸的是，由於ul嵌套在li中，結果並不是我希望的那樣。 所有“子表”（嵌套的ul s）都顯示在每個“行”（ li ）的最右端。

有什么辦法可以改變它，使每個“子表”都像在新行中一樣顯示而不改變結構？

更新：這就是我為表格（黑色）和單元格（綠色）添加邊框時的樣子

我希望是這樣的：

Answer 1

您可以混合使用表格/網格和內容顯示來實現與您的目標大致相似的內容：

例子

 .clientlist, li, span { box-shadow: 0 0 0 1px;/* or border */ }.clientlist { display: table; }.clientname { display: grid; grid-template-columns: 1fr auto auto; }.ipstatus { display: contents; }.fbladdress, .iplist { display: grid; grid-template-columns: 1fr auto }

 <ul class="clientlist"> <li class="clientname"> <span class="id">IDxxx1</span><span class="name">Hugo</span><span class='clientcount'>15</span> <ul class="fbllist"> <li class="fbladdress"> <span class="address">hugo@do.main</span><span class="fblcount">15</span> <ul class="iplist"> <li class="ipstatus"> <span class="statustext">active</span><span class="statuscount">15</span> </li> </ul> </li> </ul> </li> <li class="clientname"> <span class="id">IDxxx2</span><span class="name">Hugo2</span><span class='clientcount'>15</span> <ul class="fbllist"> <li class="fbladdress"> <span class="address">hugo@do2.main</span><span class="fblcount">14</span> <ul class="iplist"> <li class="ipstatus"> <span class="statustext">active</span><span class="statuscount">13</span> </li> <li class="ipstatus"> <span class="statustext">monitored</span><span class="statuscount">1</span> </li> </ul> </li> </ul> </li> </ul>

Answer 2

感謝G-Cyrillus ，我現在有了這個 CSS 作為解決方案。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clientlist {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 0.5em;
}
.clientname {
    display: grid;
    grid-template-columns: 6em 2em 2em min(10em) 6em;
    grid-template-areas: 
        "id name name name count"
        ".. fbl  fbl  fbl  fbl"
    ;
    justify-items: start;
}
.id {
    grid-area: id;
}
.name {
    grid-area: name;
}
.clientcount {
    grid-area: count;
    justify-self: end;
}
.fbllist {
    grid-area: fbl;
}
.fbladdress {
    display: grid;
    grid-template-columns: 2em 2em min(10em) 6em;
    grid-template-areas: 
        ". address address fblcount"
        ". status  status  status"
    ;
    justify-items: start;
}
.address {
    grid-area: address;
}
.fblcount {
    grid-area: fblcount;
    justify-self: end;
}
.iplist {
    grid-area: status;
}
.ipstatus {
    display: grid;
    grid-template-columns: 2em min(10em) 6em;
    grid-template-areas: 
        ". statustext statuscount"
    ;
    justify-items: start;
}
.statustext {
    grid-area: statustext;
}
.statuscount {
    grid-area: statuscount;
    justify-self: end;
}