1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="clearfix">
  <span>姓名</span><br>
  <span>联系方式</span>
</div>
</body>
</html>

2.css

div{
  border:1px solid red;
  font-size:20px;
}
span{
  display:inline-block;
  border:1px blue solid;
  width:100px;
  text-align:justify;
  line-height:20px;
  height:20px;
  overflow:hidden;
  
}
span::after{
  content: '';
  display:inline-block;
  width:100%;
  border:1px green solid;
}

3.效果

4.完

中文上下两端对齐（css）
1.html 2.css 3.效果 4.完
Flex 布局介绍
HTML 多个元素在一行 CSS 多个元素水平居中对齐多个元素水平两端对齐多行多个元素水平两端对齐多个元素在...
04-CSS总结-持续更新中
常用CSS 清除浮动文字两端对齐 CSS属性兼容写法 transform box-sizing
text-align-last 实现几个汉字的两端分散对齐
1 左端对齐 -> 两端分散对齐 2 css代码 3 兼容性 caniuse text-align-last 参考...
CSS实现文本两端对齐
CSS实现文本两端对齐我们在制作表单时经常遇到控件前的label标签中文本长度不一,有时候为了美观,我们会采取文...
CSS 常用效果整理
整理场景的css 灵活运用CSS开发技巧 1、使用 text-align-last 对齐两端文本代码 ...
文字两端对齐
一个可以使文字（中文）两端对齐的方法。在两行文字的下方插入一个元素，宽度填满空间，令文字与这个元素两端对齐。设...
前端笔记
1. Css 1).使用 text-align-last 对齐两端文本 text-align-last: jus...
inline-block 布局写法示例
多个元素在一行 HTML CSS 多个元素水平居中对齐多个元素水平两端对齐注意：如果元素之间如果没有空格，回车...
记录css实现文字两端对齐（兼容所有浏览器）
css实现文字两端对齐，以elementui框架的行内表单为例 .el-form--inline.el-form-...