Html 有没有办法对 `<li>` 元素进行分组？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2958272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to group `<li>` elements?
提问by Itay Moav -Malimovka
I need to divide into groups several <li>elements in a list, is it possible?
(I know I an give each element different class names/separate into different <ul>)
我需要将<li>列表中的几个元素分组，这可能吗？（我知道我给每个元素不同的类名/分成不同的<ul>）
回答by LesterDove
Have you considered nested UL's? I believe this would validate:
您是否考虑过嵌套 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>
Your CSS trick was my first guess; too bad you can't use that.
你的 CSS 技巧是我的第一个猜测；太糟糕了，你不能使用它。
回答by ChrisW
According to the XHTML schema (or one the schema anyway), the only thing you put inside a <ul>is a <li>, as described at http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule
根据 XHTML 模式（或无论如何都是模式），您在 a 中放入的唯一内容<ul>是 a <li>，如http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules 所述。 html#s_listmodule
You might tweak the appearance of the list items using CSS, by assigning different class values to the <li>elements.
您可以使用 CSS 通过为<li>元素分配不同的类值来调整列表项的外观。
<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...
回答by Dan M
Have you considered using multiple-inheritance of CSS classes? This can be a bit messy to maintain, but it will solve the case of the same entry in multiple groups. The HTML looks something like this:
您是否考虑过使用 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>
Here we have three groups (meat, vegetarian and vegan) and some toppings, like mushrooms and onions, are part of more that one group.
在这里，我们有三组（肉类、素食和纯素食），一些配料，如蘑菇和洋葱，属于更多组的一部分。
回答by FelipeAls
If you need to separate into different groups items from one unordered list than they should belong to different lists isn't it OR should be grouped in an ordered list (many ULs in one OL).
如果您需要将一个无序列表中的项目分成不同的组，而不是它们应该属于不同的列表，是不是应该将其分组在一个有序列表中（一个 OL 中有许多 UL）。
If this is for presentation needs (to display one list on many columns) and you can solve a few constraints, the second technique in https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5810687.htmlor explained also here : http://www.communitymx.com/content/article.cfm?page=2&cid=27F87
如果这是为了演示需要（在多列上显示一个列表）并且您可以解决一些限制，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
Such groups exist for select (optgroup) but obviously you can't separate the option elements because you must select only one of them so they should belong to the same element.
select (optgroup) 存在这样的组，但显然您不能将选项元素分开，因为您必须只选择其中之一，因此它们应该属于同一元素。
