有没有办法分组`<li>`元素?</li>

时间:2010-06-02 13:46:15

标签: html xhtml

我需要在列表中分成几个<li>元素,是否可能? (我知道我给每个元素赋予不同的类名/分成不同的<ul>

5 个答案:

答案 0 :(得分:20)

您是否考虑过嵌套的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技巧是我的第一个猜测;太糟糕了,你不能用它。

答案 1 :(得分:5)

根据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"> ...

答案 2 :(得分:5)

您是否考虑过使用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>

这里我们有三组(肉类,素食和素食主义者)和一些配料,如蘑菇和洋葱,是一组中的一部分。

答案 3 :(得分:0)

我相信您唯一的选择是您已经识别的选项,多个列表或通过类,因为li位于由ul或{{1}定义的列表中},它必须是ol / ulreference)的直接子项。

答案 4 :(得分:0)

如果您需要将一个无序列表中的项目分成不同于它们应该属于不同列表的项目,则不应该将其分组为有序列表(一个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)中,但显然你不能将选项元素分开,因为你必须只选择其中一个,因此它们应该属于同一个元素。