根据字符串大小填充？

Question

我正在尝试将一些列表动态插入到被element调用的中foos。我想手动编号此列表（例如<span>${i + 1}. </span>，i在列表元素编号中），但我希望此编号与元素之间的距离能够很好地对齐。我的意思是：

 8. foo
 9. foo
10. foo
11. foo

而不是摘要中显示的内容，即

8. foo
9. foo
10. foo
11. foo

多谢您的协助！

 8. foo
 9. foo
10. foo
11. foo

8. foo
9. foo
10. foo
11. foo

Answer 1

您可以依靠一些 CSS 和计数器来轻松实现这一点：

let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);

#foos {
  counter-reset:num;
}
#foos span {
  display:block;
  margin-left:20px; /*adjust this*/
  position:relative;
}
#foos span:before {
  content:counter(num)'.';
  counter-increment:num;
  position:absolute;
  right:100%;
  margin-right:3px; /*adjust this*/
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

如果数字可以增加很多，您可以尝试以下操作，其中数字区域的宽度将根据最大数字进行调整：

let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);

#foos {
  counter-reset:num;
}
#foos span {
  display:table-row;
}
#foos span:before {
  content:counter(num)'.';
  counter-increment:num;
  display:table-cell;
  text-align:right;
  padding-right:5px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>