如何在带有许多空格字符的标签附近添加“：”字符答案

【问题标题】：How To Add ':' Character Near My Label With Many Space Character如何在带有许多空格字符的标签附近添加“：”字符
【发布时间】：2017-05-26 19:45:27
【问题描述】：

我想创建如下表格：

abc         :
abcdefg     :

'abc' 有 3 个字符。 'abc :' 是 20 个字符。所以空间应该有17个字符。 'abcdefg' 有 7 个字符。 'abcdefg :' 是 20 个字符。所以空间应该有13个字符。我不想用 &nbsp 字符添加空格。

 <label class="col-sm-3 col-form-label col-form-label-lg">abc<span style="padding-left:17px;">:</span></label>

<label class="col-sm-3 col-form-label col-form-label-lg">abcdefg<span style="padding-left:13px;">:</span></label>

上述代码不正确，因为 'px' 不等于一个字符空间。

我不想写如下代码：

 <label class="col-sm-3 col-form-label col-form-label-lg">abc &nbsp &nbsp &nbsp...:</label>

如何使用填充样式添加多个字符空间？例如，我可以编写 js 函数以使用 $nbsp 添加多个空格字符吗？如下：

function AddMultiCharacterSpace(charCount){ ... }

【问题讨论】：

您使用的是等宽字体吗？如果没有，字母宽度之间的差异将取决于字母 - 所以没有单一的“字符宽度” - 这取决于字母。或者，您可以使用em 或rem
类似：.col-form-label { width: 100px; } .col-form-label:after { content: ':'; float: right; } 和一个简单的<label class="col-sm-3 col-form-label col-form-label-lg">abc</span>。 100px 的宽度只是一个假设，当然这可以是 %|vw 等中的任何内容。

标签： html css special-characters padding spaces

【解决方案1】：

你可以这样做。

对于您的label 元素，设置display: inline-block（例如，block 也可能是一个选项）。

您还需要指定一个宽度值。

要放置: 字符，您可以使用:after 伪元素并将其浮动到右侧。

label {
  width: 100px;
  display: inline-block;
}
label:after {
  content: ':';
  float: right;
}

<label>abc</label><br>
<label>abcdfgh</label>

【讨论】：

我更喜欢这个解决方案。
我们的解决方案类似。我发现很难想到一种情况会优先考虑其中一个。

【解决方案2】：

label {
	width: 100px;
	display: flex;
	justify-content: space-between;
}

<label class="col-sm-3 col-form-label col-form-label-lg">
	<span>abc</span>
	<span>:</span>
</label>
<label class="col-sm-3 col-form-label col-form-label-lg">
	<span>abcdefg</span>
	<span>:</span>
</label>

附言只需为标签选择所需的宽度。

【讨论】：

【解决方案3】：

如果你可以给你的标签一个宽度，你可以尝试使用伪元素：

label {
  position: relative;
  display: block;
  width: 100px;
}
label::after {
  content: ':';
  position: absolute;
  top: 0;
  right: 0;
}

<label>abc</label>

<label>abcdefg</label>

CODEPEN

【讨论】：