美文网首页Web 前端开发
记一个新学属性:关于文本两端对齐简单方法

记一个新学属性:关于文本两端对齐简单方法

作者: 临安linan | 来源:发表于2019-03-13 13:24 被阅读0次

开发时偶尔会遇到这种需求,要求文字两端对齐,例如这样


image.png

具体实现方法有两种,一种是这种比较复杂的(我甚至不愿意手敲)


image.png
另一种办法是利用text-align-last: justify方法,简单易用
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <lable>
    <span>
      姓名
    </span>
  </lable>
  <br>
  <lable>
    <span>
      联系方式
    </span>
  </lable>
</body>
</html>
span{
  display: inline-block;
  width: 80px;
  border: 1px solid red;
  text-align-last: justify;
}
效果图 image.png

相关文章

网友评论

    本文标题:记一个新学属性:关于文本两端对齐简单方法

    本文链接:https://www.haomeiwen.com/subject/vmvzpqtx.html