Question

我想设计一个标签如下

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

我使用制表符按钮均匀对齐所有冒号。但是当我在MVC html视图设计中使用如下所示的代码时，它永远不会像上面那样完美地对齐。我把代码编写为

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

Answer 2

正如Chun Yin已经提到的，表可以为你做到这一点：

<table border="0">
  <tr><td>Employee Name</td><td>:</td><td><!-- input field--></td></tr>
  <tr><td>Employee ID</td><td>:</td><td><!-- input field--></td></tr>
  <tr><td>Date of Birth</td><td>:</td><td><!-- input field--></td></tr>
  <tr><td>Age</td><td>:</td><td><!-- input field--></td></tr>
</table>

Answer 3

另一种方法是使用pre html标记。

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

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

3 个答案: