有没有办法对 `<li>` 元素进行分组？答案

【问题标题】：Is there a way to group `<li>` elements?有没有办法对 `<li>` 元素进行分组？
【发布时间】：2011-02-26 20:19:55
【问题描述】：

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

【问题讨论】：

【解决方案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 技巧是我的第一个猜测；太糟糕了，你不能使用它。

【讨论】：

正确的答案，但是像form > fieldset > input 这样的概念会更好，就短手而言。
@Mateng 你为什么要在列表中使用输入元素？
我想我放错了这条评论，它属于其他地方。

【解决方案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"> ...

【讨论】：

【解决方案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>

这里我们分为三组（肉类、素食和纯素），一些配料，如蘑菇和洋葱，属于多组。

【讨论】：

【解决方案4】：

我相信你唯一的选择是你已经确定的那些，多个列表或通过类，因为 li 要在由 ul 或 ol 定义的列表中，它必须是直接该ul/ol (reference) 的子级。

【讨论】：

【解决方案5】：

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

如果这是出于演示需求（在多列上显示一个列表）并且您可以解决一些限制，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

select (optgroup) 存在这样的组，但显然您不能分隔选项元素，因为您必须只选择其中一个，因此它们应该属于同一个元素。

【讨论】：