Как составить список, в котором каждая строка разделена на два столбца, а размер первого столбца увеличивается до размера его содержимого? - PullRequest
Новая
       50

Как составить список, в котором каждая строка разделена на два столбца, а размер первого столбца увеличивается до размера его содержимого?

0 голосов
/ 17 ноября 2018

Первоначально мне нужно было это для приложения чата.Теперь мне это нужно и для чего-то другого ... Думаю, мне лучше спросить.

Пример приложения чата: сообщения чата 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. Этотребует, чтобы я избавился от li s и вывел все span s на внешний уровень.Это, IIUC, нарушает семантику разметки HTML, поскольку семантически все эти span не находятся на одном уровне и, следовательно, должны быть сгруппированы.
  2. Это делает вещи более громоздкими, если я хочу, например,предоставить границы, затенение и т. д. для записей в чате.Вместо того, чтобы применять стили к одному li, я должен применить их к двум span s и быть осторожным, чтобы они правильно перекрывались.

Как правильно добиться того, чего я хочудостичь?

1 Ответ

0 голосов
/ 17 ноября 2018

Вы почти хороши в своем сеточном решении. Вы можете сохранить элемент li, введя display:contents (https://caniuse.com/#feat=css-display-contents), но вы все равно не сможете стилизовать 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>
...