[英]How to align the text within the div tag in a tabular form
我的文本后跟(:)
冒号未对齐。 任何人都可以帮助我解决这些问题。
<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>
电流输出:
要求的输出:
这看起来像表格数据,因此在这种情况下,您可以使用CSS表布局
div { display: table; } h4 { display: table-row; } h4 span { display: table-cell; }
<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>
或者您可以更改HTML并仅使用表格
<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>
div { display: inline-block; } #values h4:before { content: ': '; }
<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>
<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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.