Question

我想创建如下表单：

abc         :
abcdefg     :

'abc'有3个字符。 'abc：'是20个字符。所以空间应该有17个字符。 'abcdefg'有7个字符。 'abcdefg：'是20个字符。所以空间应该有13个字符。我不想用＆amp; 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){ ... }

Answer 1

如果您可以为标签指定宽度，可以尝试使用伪元素：

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

<label>abc</label>

<label>abcdefg</label>

<强> CODEPEN

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

P.S。只需为标签选择所需的宽度。

Answer 3

你可以这样做。

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

您还需要指定宽度值。

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在我的标签附近添加'：'字符与许多空格字符

3 个答案: