html - 如何在文本和冒号之间的 HTML 标签内为不同长度的文本添加空格以实现完美对齐？

Question

我想设计一个标签如下

Employee Name  :
Employee ID    :
Date of Birth  :
Age            :

我使用 tab 按钮均匀对齐所有冒号。但是当我在 MVC html View 设计中使用如下代码时，它永远不会像上面那样完美对齐。 我把代码写成

<p class="form_text1">
       Employee Name      : </p>
  <p class="form_text1">
       Employee ID        : </p>

输出为

Employee Name:
Employee ID:
Date of Birth:
Age:

这个不太好。我想要像我一开始提到的那样整洁的设计。

Answer 1

您可以通过定义自己的样式轻松做到这一点。尝试在 span 中添加标签文本并在其上应用 css。

p.form_text1>span {
  display: inline-block;
  min-width: 120px;
}

<p class="form_text1"><span>Employee Name</span>:</p>
<p class="form_text1"><span>Employee ID</span>:</p>
<p class="form_text1"><span>Date of Birth</span>:</p>
<p class="form_text1"><span>Age</span>:</p>