css文本两端对齐样式

最新推荐文章于 2024-04-15 20:26:30 发布

小张也被占用

最新推荐文章于 2024-04-15 20:26:30 发布

阅读量1.2k

点赞数

分类专栏： c

本文链接：https://blog.csdn.net/qq_40047198/article/details/89081977

版权

c 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

实用场景：

text-align:left

text-align:justify，最后一行不会两端对齐

1. text-align:justify;文字两端对齐；但是最后一行不会两端对齐，所以用::after让内容不是最后一行。


<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>文本两端对齐</title>
  <style>
    .label {
      display: inline-block;
      height: 100%;
      width: 100px;
      text-align: justify;
      vertical-align: top;
    }
    .label::after {
       display: inline-block;
       width: 100%;
       content: '';
       height: 0;
     }
  </style>
</head>

<body>
<div class="row">
  <span class="label">姓名</span>:
  <span class="value">李小明</span>
</div>
<div class="row">
  <span class="label">出生年月</span>:
  <span class="value">1995-12-01</span>
</div>
<div class="row">
  <span class="label">性别</span>:
  <span class="value">女</span>
</div>


</body>

</html>

2.利用 text-align-last: justify 样式来完成


<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>文本两端对齐</title>
  <style>
     .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
        margin-bottom:20px
    }
    .value {
        padding-right: 10px;
    }
  </style>
</head>

<body>
<div class="row">
  <span class="label">姓名</span>:
  <span class="value">李小明</span>
</div>
<div class="row">
  <span class="label">出生年月</span>:
  <span class="value">1995-12-01</span>
</div>
<div class="row">
  <span class="label">性别</span>:
  <span class="value">女</span>
</div>


</body>

</html>

小张也被占用

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文本两端对齐样式

实用场景：text-align:lefttext-align:justify，最后一行不会两端对齐1. text-align:justify;文字两端对齐；但是最后一行不会两端对齐，所以用::after让内容不是最后一行。<!DOCTYPE html><html><head lang="en"> <met...
复制链接

扫一扫