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

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>

无论标题的长度如何,我希望它看起来像:

它现在看起来像什么:

这是一个工作样本.

Answer 1

一种方法是将div显示为表行,将跨度和链接显示为单元格:

.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>