我有一个类似这样的 HTML 结构:
<ul>
<li>
<div></div>
<div></div>
<div></div>
<ul>
<li>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</li>
<li>
<div></div>
<div></div>
<div></div>
<ul>
<li>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</li>
<li>
<div></div>
<div></div>
<div></div>
<ul>
<li>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</li>
</ul>
我正在使用以下 CSS 将其格式化为表格:
ul {
display: table;
width:100%;
}
li {
display: table-row;
}
li div {
display: table-cell;
}
但是,我需要所有行(父行和子行)全部对齐到左侧,一个在另一个下方,没有“嵌套”或“缩进”布局。这在当前的 HTML 中可行吗? (注意,我无法更改 HTML 结构)使用“表格”布局的原因是所有列的间距都很好。我也许可以使用 Flex,但有些列的文本比其他列多得多,因此表格格式似乎效果最好。
感谢任何帮助!
https://jsfiddle.net/randkb/os7eq493/3/
我想要的结果是这样的:
而不是这个:
最佳答案
Click on below link, it have your defined outcome.
关于html - 使用 div 布局的嵌套表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74443579/