如何以表格形式對齊div標記內的文本

-1

我有文本後跟(:)冒號未對齊。任何人都可以幫助我調整它們。如何以表格形式對齊div標記內的文本

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

電流輸出：

enter image description here

請求的輸出：

enter image description here

來源

2016-06-28 Donald

你需要更多的解釋自己。張貼想要的結果的圖像。 –

這就是所需的效果！ – Pugazh

這看起來像表格數據，因此在這種情況下，你可以使用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>

來源

2016-06-28 13:07:42

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>

來源

2016-06-28 13:04:57 4castle

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

來源

2016-06-28 13:06:38

如何以表格形式對齊div標記內的文本

回答

相關問題