Question

有一个嵌套列表，如下所示：

Main-Title
    Title 1
        Element 1
        Element 2
        Element 3
    Title 2
        Element 4

HTML

<ul>
    <li>Main Title
        <ul>
            <li>Title 1
                <ul>
                    <li>Element 1</li>
                    <li>Element 2</li>
                    <li>Element 3</li>
                </ul>
            </li>
            <li>Title 2
                <ul>
                    <li>Element 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

是否可以使用这样的CSS显示列表，还是必须更改HTML标记？

Main Title      Title 1     Element 1
                            Element 2
                            Element 3

                Title 2     Element 4

这看起来更像是一个带有rowspan的表。我尝试用inline-flex做到这一点：

CSS

li {
    display: inline-flex;
}

但这不能正常工作。还有多个元素，如主标题等等。“单元格”的宽度应该是固定的。

JSFiddle： https://jsfiddle.net/mkc4uh9y/1/

这对Safari不起作用。

列表应该继续用于多个主要元素。它将显示在右侧：https://jsfiddle.net/mkc4uh9y/4/

Answer 1

是的，重置子显示：

li {
  display: inline-flex;
}
li li {
  display:flex;
}

https://jsfiddle.net/mkc4uh9y/2/

像表一样显示嵌套列表

1 个答案: