Html 引导父级非样式列表，其中每个元素都有嵌套的与父级内联的内联列表

我如何才能获得一个引导父级未排序列表

以及未排序的内联嵌套子列表

我希望最终结果如下所示：

父元素1-子元素1，子元素2

父元素2-子元素1、子元素2、子元素3、子元素4

父元素3-子元素1、子元素2、子元素3

等

现在我有：

<ul class="list-unstyled">
    <li>parent element
        <ul class="list-inline">
                <li>child element</li>
        </ul>
    </li>
</ul>

父元素

子元素

产生

父元素1

子元素1，子元素2

父元素2

子元素1、子元素2、子元素3、子元素4

父元素3

子元素1、子元素2、子元素3

等

要使子列表与父列表元素内联，需要进行哪些更改？

已添加

 .list-unstyled li{
     display: flex !important;
     padding-left: 10px;
 }

.list-inline{display: flex !important;}

。列出未设置样式的li{
显示：flex！重要；
左侧填充：10px；
}
.list内联{display:flex！important；}

父元素1

子元素1.1
子元素1.2


父元素2

子元素2.1
子元素2.2
子元素2.3
子元素2.4

当在此处运行代码片段时，当窗口宽度减小时，元素将在其元素内缠绕。常规列表将包含整行，而不是每个元素。另外，当我在我这边实现时，列表宽度正在扩展超过我的页面宽度，并在底部生成滚动条。这一定是flex的效果（我以前从未使用过）。除了使用

flex

，还有其他解决方案吗？我最终用更简单、更干净的span替换了嵌套列表。代码：父元素子元素