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

Question

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

详述聊天应用程序示例:聊天消息是 li，它们有两个 span:一个是作者的昵称，另一个是消息，我'我希望所有跨度的大小都相等(出于审美目的)并增长以适应最长的缺口。

失败的尝试:

<强>1。 flex 盒子

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>

如您所见，消息中昵称字段的宽度不相等，在我看来，这很丑陋。

<强>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. 这需要我摆脱 li 并将所有 span 带到外层。 IIUC，这打破了 HTML 标记的语义，因为从语义上讲，所有这些 span 都不在同一级别，因此应该分组。
2. 如果我想为聊天条目提供边框、阴影等，这会使事情变得更加麻烦。我没有将样式应用于单个 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>