css - 设置一行中元素的间距

Question

我有一个网站，它根据数据库中的数据生成唯一的行。有源名称，然后是关于该行的一些文本。 我想要实现的目标:

SOURCE NAME     |     This is some demo text
SOURCE NAME     |     This is some demo text
SOURCE NAME 2   |     This is some demo text
SOURCE NAME 3   |     This is some more demo text

目前发生的事情:

SOURCE NAME number 1    |     This is some demo text
SOURCE NAME number 23    |     This is some demo text
SOURCE NAME number 4357   |     This is some demo text
SOURCE NAME number 1111111   |     This is some more demo text
SOURCE NAME number 55    |     This is some demo text
SOURCE NAME number 639    |     This is some demo text

如您所见，由于来源名称文本的长度不同，这导致右侧的文本从行中的不同点开始。我们希望所有文本在每一行中都从同一点开始，以便对齐。

对于粗体文本，我已经为其分配了一个 CSS 类，如下所示:

.styling {
  font-size: 13px;
  padding-top: 3px;
  margin-left: auto;
}

HTML:

{{i['source']}}<div class="styling"><b>{{i['title']}}</b></div>

Answer 1

您可以使用 display:table 属性让您的 div 表现得像 HTML 表格。

参见文档 https://www.w3schools.com/cssref/pr_class_display.asp

.listing  {
  display: table;
}
.listing > div {
  display: table-row;
}
.listing > div > span {
  display: table-cell;
}
.listing > div > span:nth-child(2):before {
  content: '| ';
}

<div class="listing">
  <div><span>SOURCE NAME number 1</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 23</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 4357</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 1111111</span><span>This is some more demo text</span></div>
  <div><span>SOURCE NAME number 55</span><span>This is some demo text</span></div>
  <div><span>SOURCE NAME number 639</span><span>This is some demo text</span></div>
</div>