Question

我有一个类似UL LI的数据

<ul>
  <li>Person 1</li>
  <li>Person 2</li>
  <li>Person 3</li>
  <li>Person 4</li>
</ul>

但是现在我得到一个部门，我需要按部门顶部将其分组，然后按人员列表分组

喜欢

<ul>Dept 1
  <li>Person 1</li>
  <li>Person 2</li>
  Dept2
  <li>Person 3</li>
  <li>Person 4</li>
</ul>

在分组节中不关闭ul> li

Answer 1

因此创建子列表。疯狂。

<ul>
  <li>Dept 1
    <ul>
      <li>Person 1</li>
      <li>Person 2</li>
    </ul>
  </li>
  <li>Dept2
    <ul>
      <li>Person 3</li>
      <li>Person 4</li>
    </ul>
  </li>
</ul>

Answer 2

您可以像这样分组

ul>li:first-child{
  list-style-type:none;
  margin-left:-20px;
}

    <ul>
       <li>Dept 1</li>
      <li>Person 1</li>
      <li>Person 2</li>
    </ul>

    <ul>
      <li>Dept2</li>
      <li>Person 3</li>
      <li>Person 4</li>
    </ul>

Answer 3

这可能是可以使用<dl>的地方。

<dl>
    <dt>Dept 1</dt>
        <dd>Person 1</dd>
</dl>

这是“定义列表”。定义列表。 “定义术语”将是Dept1。随后是人员1的“定义术语”。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

对ul li进行分组而不创建ul和li

3 个答案: