如何将每一行分为两列，第一列增长到其内容的大小来制作列表

Question

最初我需要这个作为聊天应用程序。现在我也需要它来做其他事情。。。我想我最好问问。

详细说明聊天应用程序示例：聊天消息是li，它们有两个span：一个用于作者的缺口，另一个用于消息，我希望所有跨度的大小相等(出于美学目的(，并增长到适合最长的缺口。

失败的尝试：

1.Flexbox

span {
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
}
.author:after {
content: ":";
}
.message {
flex: auto;
}
li {
display: flex;
}

<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">SomeOtherLongerNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>

正如你所看到的，缺口字段的宽度在消息之间是不相等的，IMO，这是丑陋的。

2.固定宽度

span {
position: relative;
display: inline-block;
margin-top: 10px;
}
.author {
font-weight: bold;
margin-right: 5px;
width: 30%;
text-align: right;
vertical-align: top;
}
.author:after {
content: ":";
}
.message {
width: 65%;
}
ul {
list-style-type: none;
padding-left: 0;
}

<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span></li>
<li><span class="author">nick2</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>

正如你所看到的，宽度与缺口的长度不适应，结果是浪费了大量空间。

3.网格

div {
display: grid;
grid-template-columns: repeat(2, auto);
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}

<div>
<span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
<span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span>
</div>

这似乎是有效的(给出了期望的结果(，但尽管如此，我还是将其列为失败的尝试之一，原因有两个：

1. 这需要我去掉lis，并将所有spans带到外部级别。IIUC打破了HTML标记的语义，因为从语义上讲，所有span都不在同一级别上，因此应该进行分组
2. 例如，如果我想为聊天条目提供边框、阴影等，这会使事情变得更加麻烦。我必须将样式应用于两个span，而不是应用于单个li，并小心使它们正确重叠

实现我想要实现的目标的正确方法是什么？

Answer 1

您的网格解决方案几乎很好。您可以通过引入display:contents来保留li元素(https://caniuse.com/#feat=css-显示内容(，但您仍然无法设置li的样式，因为这一个将不再生成框内容：

ul {
display: grid;
grid-template-columns: repeat(2, auto);
}
li {
display:contents;
}
.author {
font-weight: bold;
margin-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
margin-top: 10px;
}

<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>

另一种方法是考虑display:table，如下所示：

ul {
display: table;
}
li {
display: table-row;
}
.author {
font-weight: bold;
padding-right: 5px;
text-align: right;
}
.author:after {
content: ":";
}
span {
padding-top: 10px;
display: table-cell;
}

<ul>
<li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
</li>
<li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>