有没有一种方法可以对`<li>`元素进行分组？

Question

我需要将列表中的一些 <li> 元素分组，这可行吗？ （我知道可以给每个元素分配不同的类名/分成不同的<ul>）

- Itay Moav -Malimovka

Answer 1

你考虑过嵌套的 UL 吗？我认为这将会是有效的：

<UL>
    <LI>
        <UL>
            <LI></LI>
            <LI></LI>
            <LI></LI>
        </UL>
    </LI>
    <LI>
        <UL>
            <LI></LI>
            <LI></LI>
            <LI></LI>
            <LI></LI>
            <LI></LI>
        </UL>
    </LI>
</UL>

你的CSS技巧是我第一个猜测；可惜你不能使用它。

- LesterDove

---

答案是正确的，不过像“form > fieldset > input”这样的概念会更好，因为它更简洁。 - Mateng

@Mateng 为什么要使用输入元素来创建列表？ - Buttle Butkus

我认为我放错了这个注释，它应该放到别的地方。 - Mateng

Answer 2

根据XHTML架构（或任何一种架构），您只能在<ul>中放置<li>，详见http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule。您可以使用CSS调整列表项的外观，通过为<li>元素分配不同的类值。

<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...

- ChrisW

Answer 3

您是否考虑过使用CSS类的多重继承？这可能会有点混乱难以维护，但它可以解决同一条目出现在多个组中的情况。HTML看起来像这样：

<ul class="pizza-toppings">
    <li class="meat">pepperoni</li>
    <li class="meat">bacon</li>
    <li class="vegetarian">cheese</li>
    <li class="vegetarian vegan">mushrooms</li>
    <li class="vegetarian vegan">onions</li>
</ul>

这里有三个组（肉食、素食和纯素），一些配料，比如蘑菇和洋葱，属于多个组。

- Dan M

Answer 4

我相信你已经找到了唯一的选择，多个列表或通过类来定义。因为对于一个 li 要想在 ul 或 ol 定义的列表中，它必须是该 ul/ol 的直接子节点 (引用)。

- T.J. Crowder

Answer 5

如果您需要将一个无序列表中的项目分成不同的组，那么它们应该属于不同的列表，或者应该分组在有序列表中（一个有序列表中有多个无序列表）。

如果这是为了演示需要（在多列上显示一个列表），并且您可以解决一些约束条件，则可以使用https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5810687.html中的第二种技术，或者在此处也有解释：http://www.communitymx.com/content/article.cfm?page=2&cid=27F87 这样的组存在于选择（optgroup）中，但显然您不能分离选项元素，因为您必须仅选择其中之一，因此它们应该属于同一元素。

- FelipeAls