如何以表格形式对齐div标签中的文本

Question

我的文字后跟(:)冒号未对齐。任何人都可以帮助我将它们组合起来。

<div>
       <h4> Candidate Name :</h4>           
       <h4> Branch :</h4>
       <h4> Position:</h4>
       <h4> Reference Name :</h4>
       <h4> Reference Phone # :</h4>
       <h4> Reference Company :</h4>
       <h4> Reference Job Title:</h4>
       <h4> Relationship to Employee:</h4> 
       </div>  

  

当前输出：

  

请求输出：

Answer 1

这看起来像表格数据，所以在这种情况下你可以使用 CSS表格布局

＆＃13;

＆＃13;

div {
  display: table;
}
h4 {
  display: table-row;
}
h4 span {
  display: table-cell;
}

＆＃13;

<div>
  <h4> Candidate Name  <span>: Random data</span></h4>
  <h4> Branch  <span>: Lorem</span></h4>
  <h4> Position <span>: Lorem ipsum dolor</span></h4>
  <h4> Reference Name  <span>: Random data</span></h4>
  <h4> Reference Phone #  <span>: Random data</span></h4>
  <h4> Reference Company  <span>: Random data</span></h4>
  <h4> Reference Job Title <span>: Random data</span></h4>
  <h4> Relationship to Employee <span>: Random data</span></h4>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以更改HTML并使用表格

＆＃13;

＆＃13;

<table>
  <tr> <td>Candidate Name </td> <td>: Random data</td></tr>
  <tr> <td>Branch</td>  <td>: Lorem</td></tr>
  <tr> <td>Position </td><td>: LOrem ipsum dolor</td></tr>
  <tr> <td>Reference Name </td> <td>: Random data</td></tr>
  <tr> <td>Reference Phone #</td>  <td>: Random data</td></tr>
  <tr> <td>Reference Company</td>  <td>: Random data</td></tr>
  <tr> <td>Reference Job Title</td> <td>: Random data</td></tr>
  <tr> <td>Relationship to Employee </td><td>: Random data</td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

div {
  display: inline-block;
}
#values h4:before {
  content: ': ';
}

＆＃13;

<div id="labels">
  <h4>Candidate Name</h4> 
  <h4>Date Completed</h4>
  <h4>Branch</h4>
  <h4>Position</h4>
  <h4>Reference Name</h4>
  <h4>Reference Phone #</h4>
  <h4>Reference Company</h4>
  <h4>Reference Title</h4>
  <h4>Relationship to Employee</h4> 
</div>
<div id="values">
  <h4>Name</h4> 
  <h4>11/11/1111</h4>
  <h4>Mississigua</h4>
  <h4>Salesforce Developer</h4>
  <h4>John Smith</h4>
  <h4>(416) 563-8888</h4>
  <h4>Ocean Trailer</h4>
  <h4>Service Manager</h4>
  <h4>Direct Supervisor</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<div style="width: 200px">
  <h4> Candidate Name :</h4> 
  <h4> Branch :</h4>
  <h4> Position:</h4>
  <h4> Reference Name :</h4>
  <h4> Reference Phone # :</h4>
  <h4> Reference Company :</h4>
  <h4> Reference Job Title:</h4>
  <h4> Relationship to Employee:</h4> 
</div>

h4 {
  float: right;
}