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

Question

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

详细说明聊天应用程序示例：聊天消息是 lis，它们有两个 spans：一个是作者的昵称，另一个是消息，我想要大小所有跨度的相等（出于审美目的）并增长以适应最长的缺口。

失败的尝试：

1.弹性框

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>

如您所见，宽度不适应刻痕的长度，结果是 space 的大量浪费。

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>

这似乎可行（给出了预期的结果），但我仍然将其列为失败尝试，原因有二：

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

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

Answer 1

您的网格解决方案已经差不多好了。您可以通过引入 display:contents (https://caniuse.com/#feat=css-display-contents) 来保留 li 元素，但是您仍然无法设置 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>

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

How to make a list with each row divided into two columns, with the first column growing to the size of its contents?

css

column-width

width

失败的尝试：