CSS嵌套串列作為表格？

我有以下串列結構：

<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">[email protected]</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)
  • [email protected] (15)
    • 活躍：15

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

• IDxx1: Hugo1 (15)
  • [email protected] (15)
    • 活躍：15
• IDxx2: Hugo2 (14)
  • [email protected] (14)
    • 活躍：11
    • 監測：3
• IDxx3: Hugo3 (15)
  • [email protected] (15)
    • 失敗：15
• IDxx4：Hugo4 (15)
  • [email protected] (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">[email protected]</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>

不幸的是，由于uls 嵌套在lis 中，結果并不是我所希望的。所有“子表”（嵌套的uls）都顯示在每個“行”（li）的最右端。

有什么方法可以更改它，以便在不更改結構的情況下顯示每個“子表”就像在新行中一樣？

Update: This is what it looks like when I add borders to the tables (black) and cells (green)

I hoped for something like this:

uj5u.com熱心網友回復：

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

例子

.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">[email protected]</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">[email protected]</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>

標籤：html css

上一篇：通過jQuery.Keyframes使用存盤在變數中的值

下一篇：更改“溢位頭像”的大小以匹配AvatarGroup中的其他頭像