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

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显示为表格行，将跨度和链接显示为单元格：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用一张桌子。

＆＃13;

＆＃13;

<table>
  <tr>
    <td>100</td>
    <td><a href="">cell1</a></td>
    <td><a href="">cell2</a></td>
    <td><a href="">cell3</a></td>
    <td><a href="">cell4</a></td>
  </tr>
  <tr>
    <td>1</td>
    <td><a href="">cell5</a></td>
    <td><a href="">cell6</a></td>
    <td><a href="">cell7</a></td>
    <td><a href="">cell8</a></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;