美文网首页
字体两端对齐

字体两端对齐

作者: 大风吹兮风清扬 | 来源:发表于2019-03-16 16:18 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Bin</title>
    <style>
    div{
        border: 1px solid red;  /*加线框并设置粗细,线框颜色为红*/
        font-size: 20px;    /*字体大小*/
    }
        span{
            border: 1px solid green;
            display: inline-block;   /*调整字体上下间距*/
            width: 5em;     /*固定5字节宽度*/
            text-align: justify;
            line-height: 20px;  上下两个框间距为20
            overflow: hidden;
            height: 20px;
        }
        span::after{
            content:'';
            display: inline-block;
            width: 100%;
            border: 1px solid blue;
        }

    </style>
</head>
<body>
<div>
<span>姓名</span> <br>
    <span>联系方式</span>
</div>
</body>
</html>

相关文章

网友评论

      本文标题:字体两端对齐

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