根据字符串大小填充? [英] Padding based on size of string?

问题描述

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

I'm trying to dynamically insert some list into an element called foos. I want to manually number this list (e.g. <span>${i + 1}. </span> for i in the list element number) but I want the distance between this number and the element to align nicely. By nicely I mean:

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

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

rather than what is displayed in the snippet, i.e.

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

感谢您的任何帮助！

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

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

推荐答案

您可以依靠一些CSS和计数器轻松实现这一目标:

You can rely on some CSS and counter to easily achieve this:

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>

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

If the number can increase a lot you can try the following where the width of the number area will adjust based on the maximum number:

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>

这篇关于根据字符串大小填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！