像表一样显示嵌套列表 [英] Display nested list like a table

问题描述

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

There is a nested list, which looks like this:

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

b $ b

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标记吗？

Is it possible to display the list with CSS like this or do I have to change the HTML markup?

Main Title      Title 1     Element 1
                            Element 2
                            Element 3

                Title 2     Element 4

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

This looks more like a table with rowspan. I tried to do that with inline-flex:

CSS

li {
    display: inline-flex;
}

但这不能正常工作。

JSFiddle： a href =https://jsfiddle.net/mkc4uh9y/1/ =nofollow> https://jsfiddle.net/mkc4uh9y/1/

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

这对Safari不起作用。

This doesn't work for Safari.

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

And the list should be continued for multiple main elements. Here it will displayed to the right: https://jsfiddle.net/mkc4uh9y/4/

推荐答案

是，重置子li显示：

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

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

这篇关于像表一样显示嵌套列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！