javascript - 如何向前而不是向后添加文本

Question

我想将行集合与每行前面的标题对齐。但是行的位置会根据标题的长度而改变。所以我想如果我可以向前而不是向后增加文本的长度，我也许能够解决这个问题。但我不知道该怎么做。感谢您的帮助!

这是我的 HTML:

<div>
  <span class="title">1</span>
  <a href="#" class="cells">one</a>
  <a href="#" class="cells">two</a>
  <a href="#" class="cells">three</a>
  <a href="#" class="cells">four</a>
  <a href="#" class="cells">five</a>
</div>
<div>
  <span class="title">100</span>
  <a href="#" class="cells">one</a>
  <a href="#" class="cells">two</a>
  <a href="#" class="cells">three</a>
  <a href="#" class="cells">four</a>
  <a href="#" class="cells">five</a>
</div>

无论标题长短，我希望它看起来像什么:

现在的样子:

这是一个 working sample .

Answer 1

一种方法是将 div 显示为表格行，将 span 和链接显示为单元格:

.title, .cells {
  display: table-cell;
}
div {
  display: table-row;
}

.cells {
  min-width: 10px;
  min-height: 10px;
  border: 1px solid black;
  margin-right: 0;
}

.title {
  min-width: 20px;
  text-align: right;
}

.title,
.cells {
  display: table-cell;
}

div {
  display: table-row;
}

<div>
  <span class="title">1</span>
  <a href="#" class="cells">one</a>
  <a href="#" class="cells">two</a>
  <a href="#" class="cells">three</a>
  <a href="#" class="cells">four</a>
  <a href="#" class="cells">five</a>
</div>
<div>
  <span class="title">100</span>
  <a href="#" class="cells">one</a>
  <a href="#" class="cells">two</a>
  <a href="#" class="cells">three</a>
  <a href="#" class="cells">four</a>
  <a href="#" class="cells">five</a>
</div>