Css 如何制作一个列表，将每一行分成两列，第一列增长到其内容的大小？

最初，我需要一个聊天应用程序。现在我还需要它来做别的事情。。。我想我最好问问

详细说明聊天应用程序示例：聊天信息是

li

s，它们有两个

span

s：一个用于作者的尼克，另一个用于信息，我希望所有跨度的大小相等（出于美观目的），并增长到适合最长的尼克

失败的尝试： 1。Flexbox

span{
边缘顶部：10px；
}
.作者{
字体大小：粗体；
右边距：5px；
}
作者：之后{
内容：“：”；
}
.留言{
flex：自动；
}
李{
显示器：flex；
}

尼克顿：你不记得了吗，11月5日，是火药叛国日，我放下枪，让他们都跑了。偷走了他们所有的篝火
另一个人，苏茜小姐有一艘汽船，汽船上有一个铃铛。汽船去了天堂，苏茜小姐去了

您的网格解决方案几乎很好。您可以通过引入

display:contents

（）来保留

li

元素，但您仍然无法设置

li

的样式，因为此元素将不再生成框内容：

ul{
显示：网格；
网格模板列：重复（2，自动）；
}
李{
显示：内容；
}
.作者{
字体大小：粗体；
右边距：5px；
文本对齐：右对齐；
}
作者：之后{
内容：“：”；
}
跨度{
边缘顶部：10px；
}

尼克顿：你不记得了吗，11月5日，是火药叛国日，我放下枪，让他们都跑了。偷走了他们所有的篝火。

苏西有一艘汽船，汽船上有一个钟。汽船去了天堂，苏茜小姐去了

我想首选是使用CSS来完成这一切，而避免使用javascript？由于您指定的原因，JS可能是不使用CSS网格的必要折衷方案。是否列出列？听起来像张桌子。太棒了，谢谢！不过，值得一提的是，您的第二个表格示例需要分隔行的边框间距，因为忽略了边距：@gaazkam这就是我在第二个示例中使用填充的原因；）是的，但我的意思是最后的

span{margin top:10px；}