css文本两端对齐

最新推荐文章于 2024-09-19 09:19:06 发布

zhuzhucaicai

最新推荐文章于 2024-09-19 09:19:06 发布

阅读量330

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/zhuzhucaicai/article/details/111590470

版权

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