技術標籤：csshtml

css文字兩端對齊

• 專案中通常需要用到文字兩端對齊的這種樣式，如下：
  
• html程式碼如下

 <table>
 	<tr>
		<td class="title">用 戶 名</td>
        <td>{{user_info.username}}</td>
    </tr>
    <tr>
        <td class="title">真 實 姓 名</td>
        <td>
 
<el-input v-model="user_info.trueName" placeholder="請輸入真實姓名"></el-input></td>
	</tr>
	<tr>
		<td class="title">暱 稱</td>
		<td><el-input v-model="user_info.nickname" placeholder="請輸入暱稱"></el-input>
 
</td>
	</tr>
</table>

• css程式碼如下

 td.title{
	width:85px;
	text-align-last:justify;
	text-align:justify;
	text-justify:distribute-all-lines; // 這行必加，相容ie瀏覽器
}
td:last-child::before{
	display:inline-block;
    width:20px;
    content:':';
    margin-left:10px;
}