Html 如何显示两个列表，每个li元素彼此垂直放置？

我有两个单独的列表（不过我愿意举个例子说明如何只列出一个）。第一个列表是信息（如“标题”、“长度”、“发布日期”），第二个列表是信息的答案（如“50灰色”、“50分钟”和“2015”）

这是我想要的输出，如您所见，信息的答案在信息下方垂直居中：

（注：可能会有更多信息，如演员阵容、预算等）

我尝试过使用

Flex

，但是这两个列表分别显示在彼此的顶部：

ul{
空白：nowrap；
}
李{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
文本对齐：居中；
}

头衔
长度
发布日期


50种灰色
50分钟
2015年

您可以为此使用CSS表格布局。您必须在

ul

上设置

display:table row

，在

li

上设置

display:table cell

。此外，还应在

li

上添加

文本对齐：居中

ul{
显示：表格行；
}
李{
显示：表格单元格；
文本对齐：居中；
填充：10px 20px；
}

头衔
长度
发布日期


50种灰色
50分钟
2015年

这里有一种方法，使用单个

ul

和flexbox：

ul{
显示器：flex；
列表样式：无；
填充：0；
保证金：0；
}
李{
弹性：1；
文本对齐：居中；
}
h2，p{
空白：nowrap；/*可选*/
}

标题
50种灰色

另一个标题

另一个标题

另一个标题



长度
50分钟

另一段

另一段

另一段



发布日期
2015年

再过一年

再过一年

再过一年

假设您希望每行对齐，即使其中一个项目的内容更高，您需要有一个（在本例中）

ul

，然后调整项目的大小，以便每3个项目包装一次

为了确保每个项目具有相同的宽度，我使用

flex-basis

ul{
显示器：flex；
柔性包装：包装；
对齐内容：列之间的空格；/*在列之间创建空格*/
列表样式：无；
填充：0；
}
li:n第n个子项（-n+3）{/*前3项*/
字体大小：24px；
字体大小：粗体；
}
李{
弹性基准：计算（33.333%-10px）；/*1/3减去排水沟10px*/
填充：10px；
框大小：边框框；
显示器：flex；
证明内容：中心；
文本对齐：柔性开始；
}

头衔
长度
发布日期
50种灰色
50分钟
2015年
50深浅的黑色，以及更长的文字，因此它会断线
50分钟
2015年
50种灰色
50分钟
2015年

您不能使用列表执行此操作，否则您需要创建3组

ul

，每组包含2个

li

元素